reactjs - Material-UI：如何在包含状态钩子的 Checkbox 的 onChange 函数中检查 Checkbox 是否被选中？

Question

我正在尝试检查是否在 Material-UI Checkbox 的状态挂钩方法中检查了复选框组件，我进行了很多搜索，但没有一个解决方案对我有用。

最终目标是在复选框被选中时将新对象添加到状态中，如果在状态中存在等效对象时未选中复选框，则从状态中删除对象。

我当前的代码正在将新项目添加到状态中，无论复选框是选中还是未选中，并且正在寻找一种简单的方法来相应地更新我的状态。

我的代码：

const multiSelectQuestions = currQuestion.answerOptions.map(
  ({ answerText, price }) =>
    answerText !== "Custom" ? (
      <FormControlLabel
        className="currentCheckbox"
        value={answerText}
        control={<Checkbox />}
        label={answerText}
        price={price}
        onChange={() =>
          updateSelectedCheckboxes([
            ...selectedCheckboxes,
            {
              selectedAnswer: answerText,
              price: price,
            },
          ])
        }
      />
    ) : (
      <div className="customOption">
        <FormControlLabel
          value={answerText}
          control={<Checkbox />}
          label={answerText}
          price={price}
        />
        <TextField
          label="Please Specify"
          variant="outlined"
          id="mui-theme-provider-outlined-input"
          /* error */
        />
      </div>
    )
);

标签： reactjsreact-hooksmaterial-ui

Answer 1

尝试从这里改变：

onChange={() =>
          updateSelectedCheckboxes([
            ...selectedCheckboxes,
            {
              selectedAnswer: answerText,
              price: price,
            },
          ])
        }

对此：

onChange={(event) =>
          updateSelectedCheckboxes([
            ...selectedCheckboxes,
            {
              selectedAnswer: answerText,
              price: price,
            },
          ])
        }

然后您可以像这样获取复选框的值：

event.target.checked