Блог

Я пытаюсь проверить, установлен ли компонент checkbox в методе перехвата состояния флажка Material-UI, я много искал, но ни одно из решений не сработало для меня.

Конечная цель — добавить новый объект в состояние, если флажок установлен, и удалить объект из состояния, если флажок снят, пока объект equilavent присутствует в состоянии.

Мой текущий код добавляет новые элементы в состояние независимо от того, установлен или снят флажок, и я ищу простой способ соответствующим образом обновить свое состояние.

Мой код:

 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>
    )
); 

Попробуйте изменить это:

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

к этому:

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

затем вы можете получить значение флажка следующим образом:

 event.target.checked