如何在 material-ui 自动完成中覆盖 autocomplete/autofill - React JS

Question

我正在使用 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' 显示为父开发属性而不是输入

我使用了这个代码

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

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

Answer 1

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

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

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

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

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

如何在 material-ui 自动完成中覆盖 autocomplete/autofill - React JS

How to override autocomplete/autofill in material-ui autocomplete - React JS

reactjs

material-ui

react-material