如何使用钩子在react中切换单选按钮的检查值

Question

我有一组单选按钮是根据一些外部数据构建的，如下例所示。除了aria-checked属性外，它们的渲染和工作方式与我预期的一样。单击单选按钮可切换选中的值，但在选择另一个单选按钮时，该值仍保持为true。

如果我按顺序单击每个单选按钮，我会得到一个显示aria-checked="true"的单选按钮列表，这显然不是最好的体验。

我不知道当检查了另一个单选按钮时，如何将其检查值切换回false。

任何帮助都会很棒！

输入：

const [isChecked, setIsChecked] = useState(false);
<Input
type={type}
id={id}
value={id}
name={name}
aria-label={label}
aria-checked={isChecked}
onChange={() => setIsChecked(!isChecked)}
/>
<Label htmlFor={id}>{label}</Label>

用法：

<fieldset>
{someData.map(item => {
return (
<RadioButton
type="radio"
key={item.id}
id={item.id}
name={item.name}
label={item.label}
/>
);
})}
</fieldset>

Answer 1

您可以尝试这样的方法。

const Radio = React.memo(function Radio({
item,
checked,
onChange
}) {
console.log("rendering", item.label);
return (
<label>
{item.label}
<input
type="radio"
value={item.id}
checked={checked}
onChange={onChange}
/>
</label>
);
});
const RadioList = ({ items, value, onChange }) => (
<div>
{items.map(item => (
<Radio
item={item}
key={item.id}
checked={item.id === value}
onChange={onChange}
/>
))}
</div>
);
const App = ({ items }) => {
const [value, setValue] = React.useState(items[0].id);
const [v, setV] = React.useState(items[1].id);
const onChange = React.useCallback(
e => setValue(e.target.value),
[]
);
const onOther = React.useCallback(
e => setV(e.target.value),
[]
);
return (
<div>
<RadioList
items={items}
value={value}
onChange={onChange}
/>
<RadioList
items={items}
value={v}
onChange={onOther}
/>
</div>
);
};
//render app
ReactDOM.render(
<App
items={[
{ id: "1", label: "one" },
{ id: "2", label: "two" },
{ id: "3", label: "three" },
{ id: "4", label: "four" }
]}
/>,
document.getElementById("root")
);

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

Answer 2

这里有两件事需要更改。

1. 当您在同一组下呈现单选按钮列表时，所有单选按钮的名称属性都应该相同。因此，与其从someData读取name属性，不如将相同的name属性传递给每个按钮。或者在someData中为每个对象保留相同的名称。

2. 在那之后，我认为状态不应该在input组件上，因为一旦您检查了单选按钮，即使单击了某个单选按钮，也永远不会更改其值。您可以尝试在每个单选按钮上保持相同的名称属性。

因此，解决方案可以是将选中的属性实际传递给输入组件，具体取决于实际选择的单选按钮。请检查以下代码：

const RadioButton = ({ type, id, name, label, checked, onChange }) => {
return (
<>
<input
type={type}
id={id}
value={id}
name={name}
aria-label={label}
aria-checked={checked}
checked={checked}
onChange={onChange}
/>
<label htmlFor={id}>{label}</label>
</>
)

}

const RadioGroup = () => {
const someData = [{
id: 1,
name: 'name',
label: 'name 1'
}, {
id: 2,
name: 'name',
label: 'name 2'
}, {
id: 3,
name: 'name',
label: 'name 3'
}];
const [checkedValue, setIsChecked] = useState(1);
return (
<fieldset>
{someData.map(item => {
return (
<RadioButton
type="radio"
key={item.id}
id={item.id}
name="radioGroup"
label={item.label}
checked={checkedValue === item.id}
onChange={() => setIsChecked(item.id)}
/>
);
})}
</fieldset>
)

}