到目前为止,已完成的操作:1.多个可选复选框。 2.取消选中所有选项中的“所有这些”复选框。
我在寻找什么?:我试图找出当我单击其他任何复选框时如何取消选择“无这些”框的情况。
当前,我可以选择所有框,然后单击“无此”框取消选中它们。
这是我的代码。
const Step2 = (props) => {
const [state, updateState] = useState(STEP_2_STATE);
const { answers, none } = state;
const toggleAnswer = (answer) => {
const updatedAnswers = { ...answers, [answer]: !answers[answer] };
const checkedAnswers = getCheckedAnswers(updatedAnswers);
updateState({ ...state, answers: updatedAnswers });
props.update("symptoms", checkedAnswers);
};
const toggleNone = () => {
const newNone = !none;
updateState({ ...state, none: newNone });
props.update("symptoms", newNone ? [] : getCheckedAnswers(answers));
};
return (
<WizardStep>
<h5 className="text-primary">
Question {props.currentStep - 1} / {props.totalSteps - 2}
</h5>
<h2 className="mb-5">
Do you have any of these symptoms? Please, select all that apply:
</h2>
{Object.entries(answers).map(([answer, checked], i) => (
<AnswerCheckbox
key={i}
text={answer}
onSelect={() => toggleAnswer(answer)}
checked={!none && checked}
/>
))}
<AnswerCheckbox
text={"None of these"}
onSelect={toggleNone}
checked={none}
/>
</WizardStep>
);
};