选择其他选项时如何取消选择“无”。 (反应钩)

时间:2020-05-18 23:15:54

标签: javascript reactjs react-hooks

到目前为止,已完成的操作: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>
  );
};

0 个答案:

没有答案