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
Related
I have created simple tab component in React.
Here, I'm having content with checkbox. In Tab1, I'm selecting some content and navigating to Tab 2. If I click again Tab 1, there is no checkbox got selected which I clicked earlier. Please help me, how to store the selected checkbox value and how to retrieve that again when I'm clicking Tab 1. Thank you
Sample code here: https://codesandbox.io/s/optimistic-gagarin-npix45
The issue is that you are re-rendering the tab.
Every time you change the active tab you are doing this:
const TabContent = ({ id, activeTab, children }) => {
return activeTab === id ? <div className="TabContent">{children}</div> : null;
};
To fix this, you should store the status of the checkbox checked on the parent component of tabs.
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
}}
/>
I have built a navigation hamburger using a checkbox toggle to reveal/hide the menu so the menu works if the user is on a non-JS browser.
However, this means that keyboard users have to know to press space to toggle the menu, when the expected functionality for buttons would be the return key.
Is there an efficient way to toggle the checkbox with the return key if the user is focussed on it or shall I just leave it with the spacebar?
I think that the simplest way would be to write script to get all bubbled keypress events and toggle inputs.
<input type="checkbox" class="js-toggle-enter" />
document.addEventListener('keypress', (e) => {
if( e.key === "Enter" && e.target.classList.contains('js-toggle-enter')){
e.target.checked = !e.target.checked;
}
})
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.
I am new to React and I stumbled upon react-dropdown-tree-select for a specific need I had allowing users to view data in Tree format for selection in DropDown. But, I want the users to only select 1 value at a time. How can i enforce that?
There is no such property available directly in react-dropdown-tree-select. But you can listen to onChange event and reset the entire data which you have passed in data props with the updated data with only one node selected.
Check the following code.
onChange = (currentNode) => {
// keep reference of default data structure.
const updatedData = this.props.defaultData;
// find node related to currentData in your tree and set checked property
this.setState({data : updatedData });
}
render = () => {
return (
<DropdownTreeSelect
data={this.state.data}
onChange={this.onChange}
/>
);
}
This will basically stop the user from selecting multiple options instead of disabling remainig item you are unselecting the previously selected items.
If you just want one element selected at a time you can use mode="radioSelect"