I Have this form in one of my react components
<div className="form-check">
<input
type="radio"
className="form-check-input"
value={3}
name="priority"
/>
<label className="form-check-label">High Priority</label>
</div>
<div className="form-check">
<input
type="radio"
value={2}
className="form-check-input"
name="priority"
/>
<label className="form-check-label">Medium Priority</label>
</div>
<div className="form-check">
<input
type="radio"
value={1}
className="form-check-input"
name="priority"
/>
<label className="form-check-label">Low Priority</label>
</div>
I then have an onclick function on a button. I want to get the value of the radio form in my function. How do I do that? Is there a way to do it with the useRef hook? Note: I am using functional components so any solution with class components will not help.
Thank you!
Use state to maintain the value of the selected radio input.
We add one listener to the parent element so we can use event delegation which calls a function when it captures a change event from a child input element. When it's called it checks the clicked element is an input (radio) and then sets the state with its value.
The button simply logs the current state.
const { useState } = React;
function Example() {
// Initialise state
const [ radio, setRadio ] = useState(0);
// When the button is clicked log the current state
function handleClick(e) {
console.log(radio);
}
// When an element is clicked
function handleChange(e) {
// Grab the nodeName and value from
// the clicked element
const { nodeName, value } = e.target;
// Because we're using event delegation (attaching
// an event listener to a parent element and capturing
// events from child elements as they "bubble up" the DOM)
// we need to check to see if the clicked element is an input
if (nodeName === 'INPUT') {
// Set the state with the input value
setRadio(value);
}
}
return (
<div onChange={handleChange}>
<div className="form-check">
<input
type="radio"
className="form-check-input"
value={3}
name="priority"
/>
<label className="form-check-label">High Priority</label>
</div>
<div className="form-check">
<input
type="radio"
value={2}
className="form-check-input"
name="priority"
/>
<label className="form-check-label">Medium Priority</label>
</div>
<div className="form-check">
<input
type="radio"
value={1}
className="form-check-input"
name="priority"
/>
<label className="form-check-label">Low Priority</label>
</div>
<button onClick={handleClick}>Show radio state</button>
</div>
);
};
ReactDOM.render(
<Example />,
document.getElementById('react')
);button { margin-top: 0.5em; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>I have created demo here, you could add onChange method to each input and then save inside in a state.
Demo: https://codesandbox.io/s/tender-sinoussi-1t7fi?file=/src/App.js