reactjs - Material UI 5.0：当自动完成值为空时，每个项目都被选中

Question

当前行为

当 Input 为 null 时，样式突出显示为灰色光（类似这样）

这是我当前的代码

<Field
  name="day"
  render={({ input }) =>
      <Autocomplete
         options={this.days}
         getOptionLabel={(option) => {
              return option.toString() 
          }}
          {...input}
          onChange={(e, val) => {
              input.onChange(val);
          }}
          isOptionEqualToValue={(option, value) => {
              if (value === "" || value === option)
                  return true;
          }}
       renderInput={(params) => <TextField {...params} label="Day" variant="outlined" />}
      />
} />

注意：我对 react-final-form 使用“Field”包装器（因为 mui-rff 尚未升级到 MUI 5.0）

预期行为

在这张图片上，当我选择一个值时，它与我的选项数组匹配并且样式恢复正常。

语境

铬：94.0.4606.71

标签： reactjsautocompletematerial-ui

Answer 1

最后我找到了解决方案。

我需要通过添加此选项来{...input}作为第一个道具移动： 。options={this.days}value={null}

注意你声明的地方{...input}。