如何从 reactJS 中的无线电形式获取价值

Question

我的一个 React 组件中有这个表单

      <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 钩子来做到这一点？注意：我使用的是功能组件，因此任何包含 class 组件的解决方案都无济于事。

谢谢！

Answer 1

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

我们向父元素添加一个侦听器，这样我们就可以使用 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>

Answer 2

我在这里创建了demo，你可以给每个input加上onChange方法，然后在里面保存一个state。

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

如何从 reactJS 中的无线电形式获取价值

How to get value from radio form in reactJS

javascript

forms

input

reactjs

react-hooks