材质UI文本字段“禁用”属性不会更新多次

Question

尝试制作一个有无线电开关的程序，每个开关相当于一个不同的布尔值。根据布尔值，它会使文本字段上的“禁用”属性为true或false。我的代码允许将按钮默认选择为启用编辑，当我选择禁用时，它将禁用文本字段。但是，如果我单击“禁用”，然后再次尝试单击“启用”，则不会将文本字段从“禁用”更改为“启用”。

  const [radioEdit, setRadioEdit] = React.useState(false);

        <RadioGroup
          value={radioEdit}
          onChange={(e) => setRadioEdit(e.target.value)}
          aria-labelledby="demo-radio-buttons-group-label"
          name="radio-buttons-group"
          row
        >
          <FormControlLabel
            value={true}
            control={<Radio />}
            label="Disabled"
          />
          <FormControlLabel
            value={false}
            control={<Radio />}
            label="Enabled"
          />

            <p>{String(radioEdit)}</p>

            <TextField
              id="outlined-basic"
              variant="outlined"
              size="small"
              ////////RIGHT HERE////////
              value={data["companyname"]}
              disabled={radioEdit}
            />

如果无线电编辑的默认状态不是“false”，它会自动禁用（设置为true或null），并且不会让我多次更新它。

Answer 1

问题在于您使用RadioGroup定义的onChange。通常，我们定义onChange={（e）=

onChange={() => setRadioEdit(!radioEdit)}

我在这里切换我的状态onChange。因此，当我们将radioEdit设置为true时，实际上 true 。这就是useState钩子的工作原理。因此，通过定义setRadioEdit（！radioEdit），我们可以切换状态。如果为true，则变为

此外，您必须关闭< code >

const [radioEdit, setRadioEdit] = useState(false);  

return (
    <>
  
  <RadioGroup
    value={radioEdit}
    onChange={(e) => setRadioEdit(!radioEdit)}
    aria-labelledby="demo-radio-buttons-group-label"
    name="radio-buttons-group"
    row
  >
    <FormControlLabel value={true} control={<Radio />} label="Disabled" />
    <FormControlLabel value={false} control={<Radio />} label="Enabled" />
  </RadioGroup>

  <p>{String(radioEdit)}</p>

  <TextField
    id="outlined-basic"
    variant="outlined"
    size="small"
    disabled={radioEdit}
  />
</> 

 );