React JS中如何覆盖Material UI Autocomplete组件的自动填充/补全属性

我正在使用Material UI的Autocomplete组件。组件本身运行正常，默认情况下文本输入框的autoComplete属性为'off'，我想要将其修改为'new-something'，但修改不生效，我设置的autoComplete='new-something'出现在了父div的属性上而非输入框本身。
我使用的代码如下：

<TextField
  {...params}
  inputProps={{
    ...params.inputProps,
    autoComplete: 'new-something',
  }}
/>

但该配置没有生效，输入框的属性中仍然显示autocomplete="off"。

产生这个问题的核心原因是 Autocomplete 组件默认会在返回的渲染参数中自带 autoComplete: 'off' 配置，该配置作用于TextField外层的Input包装组件，优先级高于你在原生input层级inputProps中设置的值，所以会直接覆盖你的自定义配置。

优先推荐更简单的实现方案：直接在Autocomplete组件上声明autoComplete属性即可，无需在内部TextField中额外配置，写法如下：

<Autocomplete
  // 原有其他Autocomplete配置保持不变
  autoComplete="new-something"
  renderInput={(params) => (
    <TextField
      {...params}
      // 原有其他TextField配置保持不变
    />
  )}
/>

如果你使用的MUI版本较低，不支持Autocomplete组件直接传autoComplete属性，也可以通过在TextField中同时覆盖InputProps的方式修改，写法如下：

<TextField
  {...params}
  InputProps={{
    ...params.InputProps,
    autoComplete: 'new-something',
    inputProps: {
      ...params.InputProps?.inputProps,
      autoComplete: 'new-something'
    }
  }}
/>

修改完成后原生输入框的autocomplete属性就会正常显示为你设置的new-something，不会再被默认值覆盖。

内容的提问来源于stack exchange，提问作者Yogesh Saroya