React - 复选框的问题

Question

我正在尝试创建一个具有四个选项的组件。用户应该只选择一个选项。因此，如果用户选择另一个选项，则 previosluy 选择的选项应更改为 false。这是我的代码：

const riddles_ = [{
    id:2,
    options: ['A grandson','A daughter','A father','A nephew'],
    state_: [false,false,false,false]
    }]

function toggleToDo(o){ 
        riddles_.state_ = [false,false,false,false]
        riddles_.state_[o] = true
        console.log(riddles_.state_)
    }

    return (
        <div>
            <input type="checkbox" id="check1" checked={riddles_.state_[0]} onClick={(o)=>toggleToDo(0)}/>
            {riddles_.options[0]}
            <div className='space'></div>
            <input type="checkbox" id="check2" checked={riddles_.state_[1]} onClick={(o)=>toggleToDo(1)}/>
            {riddles_.options[1]}
            <div className='space'></div>
            <input type="checkbox" id="check3" checked={riddles_.state_[2]} onClick={(o)=>toggleToDo(2)}/>
            {riddles_.options[2]}
            <div className='space'></div>
            <input type="checkbox" id="check4" checked={riddles_.state_[3]} onClick={(o)=>toggleToDo(3)}/>
            {riddles_.options[3]}
        </div>
    )
}

当用户点击一个复选框时，它只是变为真或假，其他的不会发生变化。我知道 riddles_.state_ 数组正在改变，但复选框似乎无法获取它的值。

Answer 1

当你处理状态时，使用来自 useState 钩子的 set 方法是一个最佳实践，使用 react 功能组件。

例子：

const init_state = [false,false,false,false]
const [checked_state, setCheckedState] = useState(init_state);

function toggleToDo(o){ 
        const current_state = [false,false,false,false]
        current_state[o] = true;
        setCheckedState(current_state);
    }

    return (
        <div>
            <input type="checkbox" checked={checked_state[0]} onClick={(o)=>toggleToDo(0)}/>
            option1
            <div className='space'></div>
            <input type="checkbox" checked={checked_state[1]} onClick={(o)=>toggleToDo(1)}/>
            option2
            <div className='space'></div>
            <input type="checkbox" checked={checked_state[2]} onClick={(o)=>toggleToDo(2)}/>
            option3
            <div className='space'></div>
            <input type="checkbox" checked={checked_state[3]} onClick={(o)=>toggleToDo(3)}/>
            option4
        </div>
    )
}