如何从 reactJS 中的无线电表单中获取价值

Question

我的一个反应组件中有这个表格

      <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>

然后我在按钮上有一个 onclick function。 我想在我的 function 中获取无线电表单的值。 我怎么做？ 有没有办法使用 useRef 挂钩？ 注意：我使用的是功能组件，因此任何使用 class 组件的解决方案都无济于事。

谢谢！

Answer 1

使用 state 保持所选无线电输入的值。

我们向父元素添加一个侦听器，因此我们可以使用事件委托，当它从子输入元素捕获更改事件时，它会调用 function。 当它被调用时，它会检查单击的元素是一个输入（无线电），然后将 state 设置为其值。

该按钮仅记录当前的 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>

Answer 2

我在这里创建了演示，您可以为每个输入添加 onChange 方法，然后将其保存在 state 中。

演示：https://codesandbox.io/s/tender-sinoussi-1t7fi?file=/src/App.js