React State 和 MUI TextFields 的奇怪行为

Question

我有一组基本代码..我正在尝试切换：

{(isLinkPhone) ?
    <Box>
        <TextField
            value={phone}
            label="Phone Number"
            disabled
        />
    </Box>
    :
    <Box>
        <TextField
            defaultValue=''
            label="Link for your button *"
        />
    </Box>
}

基本上我想做的是在切换期间：

    const [isLinkPhone, setLinkisPhone] = React.useState(false);

我想显示一个或另一个。问题是我无法同时设置value和defaultValue值——我很难理解为什么 React 将其视为不能具有受控值和不受控值的相同输入。 我想要做的是将字段设置为“无 -> 启用/可编辑”，如果!isLinkPhone - 否则将其设置为“ {phone} -> 禁用” - 问题是值在切换之间“转换”。

go关于这个有没有更好的办法？ 我对创建单独的组件犹豫不决，因为我担心我会花时间并得到相同的结果。 谁能解释为什么会这样？

Answer 1

尝试这个

  <Box>
    {isLinkPhone && (
      <TextField value={phone} label="Phone Number" disabled />
    )}

    {!isLinkPhone && (
      <TextField defaultValue="" label="Link for your button *" />
    )}
  </Box>