Could you please tell me How to focus input date field in react?I am using a plugin of semantic
https://www.npmjs.com/package/semantic-ui-calendar-react
I want to focus date input field on button click here is my code.
here is my code
https://codesandbox.io/s/3l414mno5
focus = () => {
console.log(this.a);
this.a[0].onFocus();
// this.inputRef.focus()
};
the focus is not coming in input field why?
any update ?
To enable a focus on button click, you need to set a ref like this :
this.logButton = React.createRef();
ref={this.logButton}
and access it in button click like below:
focus = e => {
this.logButton.current.openPopup();
};
openPopup() - is a fucntion to open the calendar popup, the plugin your using, has code like this, check here
demo and In multiple data fields, use dynamic refs. Hope it helps.
Related
The onchange method in draft js is executed by the Editor when edits and selection changes occur. But I want to call trigger onchange only when the user is writing or the content changes and not on focus or selection. Is there any way I can compare the previous and current editor state?
You cannot do exactly that because draft-js keep selection state of your mouse inside the editor state, onChange must be triggered, and you must update the editor state, but you check for the old and new editor state plain text and know for sure if some characters are added or deleted
const [editorState,setEditorState]= useState(EditorState.createEmpty());
function onChange(newEditorState: EditorState) {
const currentPlainText = editorState.getCurrentContent().getPlainText();
const newPlainText = newEditorState.getCurrentContent().getPlainText();
setEditorState(newEditorState);
if (currentPlainText.trim() !== newPlainText.trim()) {
/**
* do what you want knowing that you have different content in the editor
*/
}
}
I use undoStack.size property to detect the content change. It works great.
https://draftjs.org/docs/api-reference-editor-state/#undostack
onEditorStateChange = (editorState) => {
const changed = !!editorState.getUndoStack().size
...
}
I want to display the password validator popup as users type their passwords. I tried to do with onFocus or onClick, however, it seems like it triggers just once. Is there any attribute to determine if a user clicks certain input and stays in that field?
I'd tried to do with hooks, however, I am stuck on how to reset the value when use is off the password input to take off the popup. Like the picture below, the popup will only stay open when the user is typing in that field.
You can use onChangeText function to capture the events while user is typing in textbox. You can use onBlur event of textbox which is fired when user moves out of the textbox
<TextInput
onChangeText={(text) => {
// Display the popup here
}}
onBlur={() => {
// Remove the popup here
}}
/>
How to enable and disable radio button in reactjs.
I want when we click on radio button it should enable its input box.
Suppose when i select on first Radio Button so first it should display first input box and remain disabled the other input boxes in similar way when first input box is filled enable the second input box and similarly continues.
codesanbox link - https://codesandbox.io/s/loving-gates-clqzc?file=/src/App.js
You can set state on checkbox change event. As example, you can save current checkbox id, and then you can test this id for setting disable or enable for input disabled={isDisabled("formHorizontalRadios1")}:
const [currentCheckboxId, setCheckboxId] = useState("");
const setCheckbox = event => {
setCheckboxId(event.target.id);
};
const isDisabled = id => currentCheckboxId !== id;
See full example in playground: https://codesandbox.io/s/friendly-dubinsky-e1o8y?file=/src/App.js:1490-1535
I don't see anything in API for disabling this behavior.
I just want users to have to click on a specific date.
use the prop onSelecting. For example: onSelecting = {slot => false}
I had to get selection for clicked date, without drag.
Used the onSelectSlot with required logic.
onSelectSlot={(e) => {
if (e.slots?.length > 1) return; // or a message
alert("onSelectSlot" + JSON.stringify(e));
}}
Note: this wont handle drag selection styling!!
How can we display the selected value just below the input box.
Use Case:
We are using multiple select of react-select , when we select the value from the select box , it comes inside the input box as selected. Can we have a method or something to get the selected values outside the input box (just below it)
Thanks in Advance!
I had a similar problem and I solved it creating a wrapper of react-select component and adding a state to my custom component. When the react-select changes I added the selected items to my component state and I show the in a custom div below, there you can add the styles that you want. Here an example of my approach: https://codesandbox.io/s/2kyy4998y
Hope this helps you.
Regards
I recently had to do this for a project I'm working on and wrote up how I did it here. The gist is that you need a wrapper component
// SelectWrapper.js
import ReactSelect from 'react-select'
const SelectWrapper = (props) => {
const { isMulti, value } = props;
return (
<div>
{isMulti ? value.map((val) => <span>{val.label}</span>) : null}
<Select {...props} controlShouldRenderValue={!isMulti} />
</div>
)
}
The very important part here is the controlShouldRenderValue prop which we disable when isMulti is true so the select dosn't show any selected values instead letting us take care of that