reactjs - react : How to determine if a collection of radio buttons have a selected item?

Question

给定以下无序的 HTML/JSX 列表:

<ul className="settings">
  <li>
    <input type="radio" name="settings" id="beginner" ref={selectedSetting} onClick={handleSettingsChange}/>
    <label htmlFor="beginner">Beginner</label>
  </li>
  <li>
    <input type="radio" name="settings" id="intermediate" ref={selectedSetting} onClick={handleSettingsChange}/>
    <label htmlFor="intermediate">Intermediate</label>
  </li>
  <li>
    <input type="radio" name="settings" id="expert" ref={selectedSetting} onClick={handleSettingsChange}/>
    <label htmlFor="expert">Expert</label>
  </li>
  <li>
    <input type="radio" name="settings" id="custom" ref={selectedSetting} onClick={handleSettingsChange}/>
    <label htmlFor="custom">Custom</label>
  </li>
</ul>

带有触发以下功能的提交按钮:

const onSubmit = (e: MouseEvent): void => {
  console.log(selectedSetting.current)
}

我想验证是否至少选择了这些单选按钮之一。如您所见，我在这里使用了单个 useRef 变量，这会导致每次都记录“自定义”单选按钮。那么，直接的解决方案是为每个单选按钮设置一个 useRef，但是有更简单的方法吗？我可以改为给 ul 标记一个 ref 并执行类似于 jQuery 的操作以查看是否已选择其中一个吗？

Answer 1

您可以处理单选按钮的 onClick 事件，以便将状态设置为当前选中的单选按钮。

像这样:

const { useRef, useState } = React;
const { render } = ReactDOM;

function App() {
    const [selected, setSelected] = useState();
    const selectedSetting = useRef();
  
    const handleSettingsChange = e => setSelected(e.target.id);
  
    const handleSubmit = () => {
      selected 
        ? alert("Selected radio: " + selected) 
        : alert("Nothing Selected!");
    }
    
    return(
      <div>
        <ul className="settings">
          <li>
            <input type="radio" name="settings" id="beginner" ref={selectedSetting} onClick={handleSettingsChange}/>
            <label htmlFor="beginner">Beginner</label>
          </li>
          <li>
            <input type="radio" name="settings" id="intermediate" ref={selectedSetting} onClick={handleSettingsChange}/>
            <label htmlFor="intermediate">Intermediate</label>
          </li>
          <li>
            <input type="radio" name="settings" id="expert" ref={selectedSetting} onClick={handleSettingsChange}/>
            <label htmlFor="expert">Expert</label>
          </li>
          <li>
            <input type="radio" name="settings" id="custom" ref={selectedSetting} onClick={handleSettingsChange}/>
            <label htmlFor="custom">Custom</label>
          </li>
        </ul>
        <div>
          <button onClick={handleSubmit}>Submit</button>
        </div>
      </div>
    );
}

render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

---

更新的答案:

这将是一种更简洁、更“React”的方式来完成这个……

const { useState } = React;
const { render } = ReactDOM;

const MY_RADIOS = ["Beginner", "Intermediate", "Expert", "Custom"];

function App({radios}) {
    const [selected, setSelected] = useState();
  
    const handleClick = radio => event => setSelected(radio);
  
    const handleSubmit = () => {
      let msg = selected 
        ? "Selected radio: " + selected
        : "Nothing Selected!";
      alert(msg);
    }
    
    return(
      <div>
        <ul className="settings">
          {radios && radios.map(r => {
            return (
              <li>
                <label>
                  <input onClick={handleClick(r)} type="radio" name="settings" />
                  {r}
                </label>
              </li>
            )
          })}
        </ul>
        <div>
          <button onClick={handleSubmit}>Submit</button>
        </div>
      </div>
    );
}

render(<App radios={MY_RADIOS} />, document.body);

li {
  list-style-type: none;  
}

ul {
  padding-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>