![](/img/trans.png)
[英]how do you single select change the value when the radio button is checked, using react hooks?
[英]How do you toggle the checked value of a radio button in react using hooks?
根据下面的示例,我有一组从一些外部数据构建的单选按钮。 除了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>
这里有两件事你应该改变。
当您在同一组下呈现单选按钮列表时,所有单选按钮的 name 属性应该相同。 因此,不要从someData
读取 name 属性, someData
将相同的 name 属性传递给每个按钮。 或者在someData
为每个对象保留相同的名称。
在那之后,我不认为状态应该在input
组件上,因为一旦你检查了单选,即使点击了某个单选按钮,你也永远不会改变它的值。 您可以尝试在每个单选按钮上保持相同的名称属性。
因此,解决方案可以是根据实际选择的无线电实际将选中的属性传递给 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>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.