如何在反应中管理具有选中值的单选按钮答案

【问题标题】：How to manage radio-buttons with checked value in react如何在反应中管理具有选中值的单选按钮
【发布时间】：2021-03-10 11:52:18
【问题描述】：

我有这个功能，我想输出单选按钮。如果 isDefault 为 true，则默认情况下应选中单选按钮。但它不能正常工作，因为当我单击默认情况下未选中的单选按钮时，它不会被选中或切换回 isDefault 按钮。我猜这是由于重新渲染和在重新渲染期间重新选择了默认单选按钮。有没有办法防止这种行为？提前致谢。

    const renderUpgrades=(item)=>{
        return item.optionModules.map((optionModule,index)=> {
            console.log(optionModule.module)
            if (optionModule.module && optionModule.module.selectionRequired) {
                return(
                    <div>
                        <h4>{optionModule.module.name}</h4>
                        {optionModule.module.options.map((moduleOptions) => {
                                if(optionModule){
                                    return (
                                        <div>
                                            {
                                                moduleOptions.isDefault?
                                                    <div><input type="radio" value={moduleOptions.option.name} name="selectionRequired" checked="checked"/>   {moduleOptions.option.name}</div>:
                                                    <div><input type="radio" value={moduleOptions.option.name} name="selectionRequired"/>   {moduleOptions.option.name}</div>
                                            }
                                        </div>
                                    )
                                }else{
                                    return console.log("No shifts applied");
                                }
                            })
                        }
                    </div>
                )
            }
})
    }

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

React 将接受一个布尔值进行检查，因此您可以删除三元并执行以下操作：

<div><input type="radio" value={moduleOptions.option.name} name="selectionRequired" checked={moduleOptions.isDefault}/>   {moduleOptions.option.name}</div>

【讨论】：

感谢您的回答，但结果还是一样。默认单选按钮被选中，但是当我按下另一个单选按钮，然后再次按下另一个单选按钮时，默认按钮将被选中。