我有一组单选按钮是根据一些外部数据构建的,如下例所示。它们按照我的预期进行渲染和工作,但 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>
最佳答案
你可以尝试这样的事情。
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>
关于javascript - 如何使用钩子(Hook)在 react 中切换单选按钮的选中值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60623225/