如何在material-ui自动完成中覆盖自动完成/自动填充 - React JS答案

【问题标题】：How to override autocomplete/autofill in material-ui autocomplete - React JS如何在material-ui自动完成中覆盖自动完成/自动填充 - React JS
【发布时间】：2021-12-13 14:36:01
【问题描述】：

我正在使用 material-ui 自动完成 (https://mui.com/components/autocomplete/#free-solo)。

一切正常，演示在这里：https://codesandbox.io/s/0v9v9?file=/demo.tsx

默认情况下，文本输入显示 autoComplete='off' 但我想将其更改为 autoComplete='new-something' 但它不起作用并且 autoComplete='new-something' 显示为父开发属性而不是 Input

我用过这段代码

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

但它不起作用。在输入中，它仍然显示 autocomplete="off" 作为输入属性。

【问题讨论】：

标签： reactjs material-ui react-material

【解决方案1】：

正如您在文档https://mui.com/api/text-field/#props 中看到的那样，有两个同名的道具

输入属性：Attributes applied to the input element.
InputProps：应用于 Input 元素的道具。

对于自动完成属性，您需要 inputProps

   <TextField
      {...params}
      label="Search input"
      InputProps={
        ...params.InputProps,
        type: 'search',
      }}
      inputProps={{
        autocomplete: 'something'
      }}
    />

这里是代码框https://codesandbox.io/s/freesolo-material-demo-forked-8g2n1?file=/demo.tsx中的一个工作示例

【讨论】：

他们在他们的问题中做到了。
谢谢。 MUI 在自动完成代码中使用 InputProps（我安装的 lowsercase 大写）。 InputProps 应该是 inputProps。