反应:如何确定单选按钮的集合是否具有选定的项目?

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>