Material UI textfield 'disable' 道具不会更新超过一次

Question

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

  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}
            />

如果 radioEdit 的默认状态不是 'false'，它会自动禁用（设置为 true 或 null）并且不会让我多次更新它。

Answer 1

问题出在您用 RadioGroup 定义的 onChange 上。通常，我们定义 onChange={(e) => setRadioEdit(e.target.value)} 设置文本输入onEventChangeHandler 的值。但这里是单选按钮。我正在使用打字稿来找到这个问题的答案，当我 copy-pasted 你的代码时，它向我显示了 setRadioEdit(e.target.value) 处的错误，而 setRadioEdit 应该是布尔值。 TypeScript 超级有用的原因。答案是

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

我正在这里切换我的状态 onChange。所以当我们把setRadioEdit设置为true时，实际上radioEdit会被设置为true。这就是 useState 钩子的工作原理。所以通过定义 setRadioEdit(!radioEdit) 我们正在切换状态。如果它是 true，它会变为 false，反之亦然。

您还必须关闭 </RadioGroup> 组件。完整答案

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}
  />
</> 

 );

Material UI textfield 'disable' 道具不会更新超过一次

Material UI textfield 'disable' prop won't update more than once

javascript

reactjs

material-ui

use-state