How to get value from radio form in reactJS-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

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>