React-Hooks:输入被禁用后无法启用

Question

我正在尝试控制我的点数输入是启用还是禁用。当我点击checked时，它会像预期的那样被禁用。当我取消选中它时，它将保持禁用状态。我首先尝试设置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

你应该在你的Checkbox中添加checked属性

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