redux-form 的字段不能设置自动完成关闭答案

【问题标题】：redux-form's Field can't set autoComplete offredux-form 的字段不能设置自动完成关闭
【发布时间】：2020-03-20 13:20:14
【问题描述】：

我想在 redux-form 的 Field 组件中关闭浏览器在输入字段上的自动完成功能，但始终不起作用。我的代码如下。

import { Field, reduxForm } from 'redux-form/immutable';
import { TextField } from 'redux-form-material-ui';

<Field
  name="username"
  component={TextField}
  placeholder="Username"
  label="Username"
  InputProps={{ autoComplete: 'off' }} // this never works even though in the DOM's element, the attribute autocomplete="off" has already been exist
  required
  validate={[required]}
  className={classes.field}
/>

这里出了什么问题？

【问题讨论】：

你能做一个在线演示吗？这可能有助于其他人快速解决问题。
@keikai 这里面的webpack和babel配置这么多，哪里可以提供这个在线demo？
以code sandbox 为例，给出minimal reproducible example 就足够了

标签： reactjs material-ui redux-form

【解决方案1】：

实际的自动完成应用于component 参数指定的基本输入。为component 提供autoComplete 属性值将为您解决该问题。

<Field
  component={(props) => (
    <TextField  
      ...
      inputProps={{ 
        ...props.inputProps, 
        autoComplete: 'no-autocomplete' 
      }}
    />
  )}
/>

【讨论】：