在输入字段中将 defaultValue 和 value 一起反应

Question

由于我的表格很大，所以我在这里粘贴一小部分代码以便更好地理解。

当我来自select field的 select username时，必须填充下一个禁用field dob 。所以它工作正常。

但问题是在我的表单中，我有一个名为partial save button的选项，它将保存在local storage中。但是当我们刷新页面时，这不会填充到 dob 字段。

为了解决这个问题，我将 value 属性更改为defaultValue ，然后它将填充数据，但在onchange select triggers.

即使我同时尝试了 defaultValue 和 value 属性然后我得到错误说

index.js:1 警告：MuiOutlinedInputInput 包含一个带有 value 和 defaultValue 属性的 text 类型的输入。 输入元素必须是受控或不受控的（指定 value 属性或 defaultValue 属性，但不能同时指定两者）。 决定使用受控或不受控的输入元素并删除这些道具之一。 更多信息： https://reactjs.org/link/controlled-components

<FormControl >
        <InputLabel id="userLabel" >Username</InputLabel>
        <Select
          labelId="userLabel"
          id="userLabelId"

          MenuProps={MenuProps}
          label="Username"
          name="userName"
          onChange={(e) => {
            handleChange(e);
          }}
          value={userDetail.userName ?? ''}

        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          {userList ? userList.map((user) => (
            <MenuItem key={user.id} value={user.id ?? ''}>
              {user.userName}
            </MenuItem>
          )) : null}
        </Select>

      </FormControl>

      <TextField
        margin="normal"
        required
        id="dob"
        label="Date Of birth"
        name="dob"

        value={userDetail.dob ?? ''}

        disabled
      />

Answer 1

所以，这就是正在发生的事情。 当你说userDetail.dob?? '' userDetail.dob?? ''和userDetails.dob == null然后你告诉这个组件“请保持你自己的状态”。

所以组件说“没问题，我将成为一个不受控制的组件”。

然后你稍后对组件说，即当userDetails != null时，“我正在为你提供一个值”& 组件说“等一下，我是一个不受控制的组件，你不能让我成为受控的零件”。

因此，首先通过提供一个空字符串来控制它。

Answer 2

Select 的值和 menuitem 的值必须匹配。 所以你必须使用用户名。

{userList ? userList.map((flock) => (
  <MenuItem key={flock.id} value={flock.userName ?? ''}>
    {flock.userName}
  </MenuItem>
)) : null}