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

【问题标题】：How to get value from radio form in reactJS如何从 reactJS 中的无线电表单中获取价值
【发布时间】：2021-12-29 22:28:20
【问题描述】：

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

      <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 功能。我想在我的函数中获取单选表单的值。我怎么做？有没有办法使用 useRef 挂钩？注意：我使用的是函数式组件，所以任何带有类组件的解决方案都无济于事。

谢谢！

【问题讨论】：

这能回答你的问题吗？ Uncheck radio buttons in react
使用状态来维护输入值，然后在调用时访问函数中的状态。
我在哪里说单选值等于状态？我会在每个无线电输入中说明它吗？

标签： javascript reactjs forms input react-hooks

【解决方案1】：

我在这里创建了演示，你可以在每个输入中添加 onChange 方法，然后以状态保存。

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

【讨论】：

当 OP 添加他在问题中提到的那个按钮时会发生什么？您将如何记录选定的单选按钮？这只是一半的答案。
您只需要添加一个带有 onclick 事件的按钮，然后您管理状态 onclick 方法使用您想要的值，我已经更新了演示，所以您可以看到。

【解决方案2】：

使用状态来维护所选单选输入的值。

我们向父元素添加一个侦听器，这样我们就可以使用event delegation，它在捕获来自子输入元素的更改事件时调用一个函数。当它被调用时，它会检查点击的元素是一个输入（单选），然后用它的值设置状态。

按钮只是记录当前状态。

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>

【讨论】：