Material-UI Autocomplete & TextField 触发谷歌自动完成答案

【问题标题】：Material-UI Autocomplete & TextField triggers google autocompleteMaterial-UI Autocomplete & TextField 触发谷歌自动完成
【发布时间】：2020-03-13 22:48:10
【问题描述】：

我正在尝试将自动完成组件实现到我的项目中，但一段时间后我会从浏览器中获取自动填充/自动完成功能。你知道我怎么能把它关掉吗？

                        <Autocomplete

                            id="combo-box-demo"
                            options={battleRepos}
                            getOptionLabel={option => option.full_name}
                            style={{ width: 500 }}
                            renderInput={params => (
                                <TextField {...params} 
                                    label="Combo box"  
                                    variant="outlined"
                                    onBlur={event => console.log(event.target.value)}

                                    fullWidth  />
                            )}
                        />

【问题讨论】：

尝试将属性autocomplete="off"添加到TextField
那行不通

标签： javascript reactjs material-ui

【解决方案1】：

更新

随着@material-ui/core 4.7.0 和@material-ui/lab 4.0.0-alpha.33 的发布，该问题现已得到修复，不再需要以下解决方法。

这已在最近的 pull request 中得到修复，但尚未发布（将在下一个版本中发布）。

如果您想在它发布之前解决这个问题（可能会在几天内），您可以设置inputProps.autoComplete = "off"，如下所示：

<Autocomplete
    id="combo-box-demo"
    options={battleRepos}
    getOptionLabel={option => option.full_name}
    style={{ width: 500 }}
    renderInput={params => {
        const inputProps = params.inputProps;
        inputProps.autoComplete = "off";
        return (
          <TextField
            {...params}
            inputProps={inputProps}
            label="Combo box"  
            variant="outlined"
            onBlur={event => console.log(event.target.value)}
            fullWidth
          />
        );
      }
    }
/>

【讨论】：

当我尝试这个时，我收到一个与 inputProps.autoComplete 相关的错误。错误是：类型'object'.ts（2339）上不存在属性'autoComplete'
@JoshuaScott 我个人不使用 TypeScript，所以我不会帮助解决 TypeScript 问题，但下一个版本将很快发布，然后通过更新到不需要此解决方法的最新实验室版本。
@JoshuaScott，把它投射到任何地方
@JoshuaScott 查看我的更新——该错误现已修复。

【解决方案2】：

即使是最新的：

 "@material-ui/core" 
 "@material-ui/lab"

其中包含设置为'off' 的自动完成属性，我无法让自动填充框消失。

还尝试在表单标签<form autoComplete="off">...</form>上设置属性

无济于事。

解决问题的方法是将自动完成字段设置为“新密码”

<Autocomplete
    id='id'
    options={data}
    onChange={(e, val) => input.onChange(val)}
    renderInput={(params) => {
        params.inputProps.autoComplete = 'new-password';
        return <TextField {...params}
            label={label} placeholder="Type to Search" />
    }} 
/>

【讨论】：

也可以像 inputProps={{ ...params.inputProps, autoComplete: 'new-password' }} 一样添加到（以避免上面提到的 TypeScript 错误）