React-Hooks: невозможно включить ввод после его отключения

Question

Я пытаюсь контролировать, включен или отключен ввод моих точек. Когда я нажимаю на флажок, он отключается, как и ожидалось. Когда я снимаю флажок, он остается отключенным. Сначала я попытался установить disabled={isChecked}, затем я создал его собственное состояние, которое я бы переключал с помощью useEffect, но это не работает. Как только он отключен, он не будет переключаться обратно во включенный.

  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = event => {
    handleChange(event);
    setIsChecked(checked => !checked);
    setFieldValue(`questionData.${idx}.answers.${answer}.point`, 0);
    setFieldTouched(event.target.name);
  };



    <FormControlLabel
        control={
          <Checkbox
            name={`field1`}
            onChange={handleChecked}
            value={isChecked}
          />
        }
        label="Disable points"
        style={{ marginTop: 15, marginLeft: 8 }}
    />
    <FastField
      as={InputField}
      name={`field2`}
      label="Points"
      type="number"
      inputProps={{ min: '0', max: '100', step: '1' }}
      disabled={isChecked}
      handleError={handleError}
    />

Answer 1

Вы должны добавить checked реквизит к вашему Checkbox

<FormControlLabel
  control={
    <Checkbox
      checked={isChecked}
      name={`field1`}
      onChange={handleChecked}
      value={isChecked}
    />
  }
  label="Disable points"
  style={{ marginTop: 15, marginLeft: 8 }}
/>