Блог

У меня есть эта функция, в которой я хочу выводить переключатели. Если значение IsDefault равно true, переключатель должен быть установлен по умолчанию. Но это работает не так, как должно, потому что, когда я нажимаю переключатель, который по умолчанию не отмечен, он не будет выбран или переключится обратно на кнопку IsDefault. Я предполагаю, что это связано с повторным рендерингом, и во время повторного рендеринга переключатель по умолчанию get выбирается повторно. Есть ли способ предотвратить такое поведение? Заранее спасибо.

     const renderUpgrades=(item)=>{
        return item.optionModules.map((optionModule,index)=> {
            console.log(optionModule.module)
            if (optionModule.module amp;amp; 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>
                )
            }
})
    }
 

React примет логическое значение для checked, поэтому вы можете удалить троичный и просто сделать что-то вроде этого:

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