I am using Datetime of "react-datetime" and would like to close the calendar when I press enter on the input. How to do this?
Resolved using useRef and with the function _closeCalendar():
const refDataInicial=useRef();
...
<Datetime
ref={refDataInicial}
closeOnSelect={true}
dateFormat='DD/MM/YYYY'
timeFormat={false}
value={dataInicial}
onChange={handleChangeDataInicial}
onClose={handleCloseDataInicial}
inputProps={{
placeholder: "Data Inicial",
onKeyPress:(e)=>{
if (e.key === 'Enter'){
refDataInicial.current?._closeCalendar();
}
}
}}
/>
Related
I am trying to create a button group where a user can choose between multiple options. react-bootstrap 2.0.0-rc.0 provides the combination ToggleButtonGroup + ToggleButton for this purpose. Unfortunately, a radio icon appears next to the button. I want to get rid of it. Below, you can find a minimal example to reproduce the radio icon.
import * as React from "react";
import {
ToggleButton,
ToggleButtonGroup,
} from "react-bootstrap";
interface OwnState {
val: boolean;
}
export default class SomeToggleOptions extends React.Component<OwnProps, OwnState> {
constructor(p: Readonly<OwnProps>) {
super(p);
this.state = { val: true }
}
setVal = (newVal: number) => {
this.setState({
val: newVal == 1
})
}
render() {
return (
<div className="p-1 text-right">
<span className="p-1">Auto Refresh:</span>
<ToggleButtonGroup
name="radio"
size="sm"
onChange={this.setVal}
value={this.state.val ? 1 : 0}
>
{radios.map((radio, idx) => {
return (
<ToggleButton
key={idx}
id={`radio-${idx}`}
variant={
this.state.val === radio.value ? "dark" : "outline-dark"
}
value={idx}
>
{radio.name}
</ToggleButton>
);
})}
</ToggleButtonGroup>
</div>
);
}
}
NOTE: I already found React-Bootstrap Toggle Button is Failing to Hide the Radio Button Circle and this is NOT working for me.
The icon seems to disappear when I use the normal ButtonGroup + Button instead. But this is not primarily an option as you don't have the radio-like "exclusive" behavior there.
I reverted to the earlier react-bootstrap version 1.6.4. This is probably not fixable (without any hacky moves, css-overwriting, or similar) and induced by react-bootstrap 2.0.0 being only a release candidate so far.
In the earlier react-bootstrap version, my code snippet worked flawless.
This appears to be a temporary issue when upgrading react-bootstrap, see my answer here on duplicate question: https://stackoverflow.com/a/72636860/8291415
Also here is the closed issue on github: https://github.com/react-bootstrap/react-bootstrap/issues/5782
i have this code:
function MyControlledInput() {
const [altaData, setAltaData] = useState('');
const onChangeHandler = (e) => {
setAltaData(e.target.value);
return (
<>
<div>Input value: {value}</div>
<input
type='text'
name='name'
onChange={onChangeHandler}
value={altaData}
/>
<button onClick={ShowSentenceByWord}>Activate Lasers</button>
)}
can someone please explain what "e" does? i don't understand how the user data end up being in the "altaData" variable, thanks a lot
This "e" is the short term for event, which is related to the native html change event
In the link above you can check the details about its content, but most likely you'll be using e.target.value to get the newest value from the input.
And how you're using this value to call the setAltaData, the result of that will be the altData being changed.
That's the purpose of this react-hooks#useState
I write my first *.gs file of Google Ads-script.
Is there any IDE or environment where I can add breakpoints or see the variables state?
I saw only logger printing, but that's not efficient to work with.
I have tried #Andrew's reply, but didn't manage:
You can place dots in next to the line numbers and then click on the little bug icon, like displayed on this image.
This will open this debug screen:
you can use this function.
For example:
MyLogger("test");
function MyLogger(s,d=true,w=800,h=400,t=5) {
const cs=CacheService.getScriptCache();
const cached=cs.get("Logger");
const ts=Utilities.formatDate(new Date(), SpreadsheetApp.getActive().getSpreadsheetTimeZone(), "MM|dd|HH:mm:ss")
if(cached) {
var v=Utilities.formatString('%s<br />[%s] - %s',cached,ts,s);
}else{
var v=Utilities.formatString('[%s] - %s',ts,s);
}
cs.put("Logger",v,t);
//allows logging without displaying.
if(d) {
const a='<br /><input type="button" value="Exit" onClick="google.script.host.close();" />';
const b='<br /><input type="button" value="Exit" onClick="google.script.host.close();" /><br />';
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(b+v+a).setWidth(w).setHeight(h), 'My Logger');
}
}
(To view logs open spreadsheet with your script)
I am using React-Day-Picker along with react-redux-form. I need to be able to hide the keyboard for mobile - this is a responsive app. Here's an extract from my code. Am not sure where / how to achieve this, without the DayPickerInput disappearing when on a desktop.
import {Control, Errors, actions} from 'react-redux-form'
import DayPickerInput from 'react-day-picker/DayPickerInput'
...other code here...
const DateInput = (props) => <DayPickerInput
value = {modelValue === 0 ? "Select date..." : new Date(modelValue)}
format = "ddd, D MMMM YYYY"
formatDate={formatDate}
parseDate={parseDate}
onDayChange={day => {let newValue = (day && day.valueOf()) || new Date().valueOf(); dispatch(actions.change(model, newValue))} }
dayPickerProps= {{firstDayOfWeek: 1, showOutsideDays:true}}/>
return(
<Control model={model}
className={style}
component={DateInput}
validators={validation}
validateOn="change"
disabled={disabled} type="text" readOnly>
</Control>
)
Kind regards
Phil
Try passing inputProps={{readOnly:true}} to your DayPickerInput component
<DayPickerInput
{...props}
inputProps={{readOnly: true}}
/>
This should prevent keyboard to appear on iOS. Disadvantage of that is of course that you cannot type in date using keyboard on destkops as well, but all depends on your needs
I simply want to call a function with the text of a TextInput once editing of the text is done. Something like below
<TextInput onSubmitEnding={(text) => submitText(text)}>
But obviously the text is not passed as argument to onSubmitEnding, . onChangeText has it. But I really want the text after the user is done editing. So whats the simplest means to do this,
1º onSubmitEnding is not a valid event, the correct one is onSubmitEditing.
2º You can get the input value using event.nativeEvent.text
Your code should look like this
<TextInput onSubmitEnding={(event) => this.submitText(event.nativeEvent.text)}>
I'm not forcing you to certain pattern, but you should have your TextInput's value in a state. Then:
...
this.state = {
textInputValue: ''
}
...
submitText() {
console.log(this.state.textInputValue)
}
...
<TextInput
value={this.state.textInputValue}
onChangeText={(text) => this.setState({textInputValue: text})}
onSubmitEditing={() => this.submitText()} />
is completely valid. Here's a live example: https://rnplay.org/apps/wirurQ