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>

更新后的答案：

这将是一种更清洁，更“反应”的方式来实现此目标...

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>

反应：如何确定单选按钮集合中是否有选定的项目？

1 个答案: