Question

如何做出反应渲染呢？

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autocomplete="off"
    {...field}/>

Answer 1

Capital＆＃34; C＆＃34; autoComplete。 React文档中提到了这一点：

https://facebook.github.io/react/docs/tags-and-attributes.html

Answer 2

你应该把：

autoComplete="new-password"

这将删除自动填充

Answer 3

根据Mozilla documentation，您必须设置一个无效值才能真正关闭自动补全功能。在某些浏览器中，即使该属性设置为off，仍会给出自动完成建议。

这对我有用（react-bootstrap）：

<FormControl
  value={this.state.value}
  autoComplete="nope"
  {...props}
/>

Answer 4

这些解决方案都无法在Chrome 80上真正使用。

经过数小时的反复试验，这个非常奇怪的hack对我有用：

向每个autoComplete="none"添加<input>-Google现在跳过autocomplete =“ off”
将字段包装在<form>或<div>容器中
您至少需要一个autoComplete="on"有效输入字段。这应该是容器中的最后一个元素。因此，我在表单底部添加了以下输入字段：

<input 
  type="text" 
  autoComplete="on" 
  value="" 
  style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}} 
  readOnly={true}
/>

Answer 5

Chrome自动完成功能会通过添加new-password属性来关闭。

dotnet <…>.dll

实际情况如下：

autoComplete="new-password"

更多讨论：

Chrome AutoComplete Discussion

Answer 6

此处和其他地方的大部分建议在 2020 年 12 月都失败了。我想我尝试了所有这些：表单包装器、将自动完成设置为 off 或 newpassword（均无效）、使用 onFocus、使当然我在 React 中使用 autoComplete 而不是 autocomplete，但它们都没有帮助。

最终 mscott2005 的方法对我有用（+1），但我也调整了它以获得更小的示例，我将其发布为其他人的答案：

不需要表单，只需要两个输入标签：

autocomplete="off" 用于所需字段：
```
<input autoComplete="off" />
```

autocomplete="on" 用于假隐藏字段：

<input autoComplete="on" style={{ display: 'none' }}
    id="fake-hidden-input-to-stop-google-address-lookup">

这个 id 是我在不使用评论的情况下记录什么是真正的黑客所拥有的最好的。

Answer 7

我用一行解决了它：

如果您使用推荐的方式“changeHandler（）”和组件状态，只需插入：

changeHandler = (e) => {    
  if (!e.isTrusted) return;
  ... your code
}

有关changeHandler（）的更多信息 - 事情：
https://reactjs.org/docs/forms.html#controlled-components

Answer 8

autoComplete =“ none”-对我有用。

Answer 9

我也尝试了许多选项，但是最终要做的是用<form>标签替换<div>标签，并手动管理该表单中的每个输入。

Answer 10

这里是“它可以在我的机器上工作”

Chrome版本83.0.4103.116 和React。看来对我有用的技巧是将其放入表单中并添加 autoComplete 属性。注意如果在非反应性应用程序上尝试此操作，则必须使用小写C来自动完成

 <form autoComplete="off">
      <input type="text" autoComplete="new-password" />
 </form>

和

<form autoComplete="new-password">
  <input type="text" autoComplete="new-password" />
</form>

Answer 11

我在 redux 表单上自动完成时遇到问题，这是我使用 redux 表单所做的一个解决方法；工作 2021/03/08

if(userId!=undefined)
    {
      instance.get('/user/'+userId)
        .then(function(response){
          dispatch(initialize('user_create_update_form',{
            name:response.data.name,
            email:response.data.email,
            password:response.data.password,
            user_scope:response.data.user_scope.map((item,index)=>{
              return {
                value: item.name,
                label:item.name
              }
            })
          }));
      });
    }
    else
    {
      dispatch(initialize('user_create_update_form',{
        name:"",
        email:"Mail",
        password:"New Password",
        user_scope:[]
      }));
    }

目标是：发送一个带有虚拟值的表单。

Answer 12

你可以使用useEffect

function ScheduleComponent(props){
const [schedulecontent, setSchedulecontent] =seState({email:'',phone:'',date:'',time:''});

   function handlechange(event) {
      const { name, value } = event.target;
       setSchedulecontent((prevContent) => {
        return {
          ...prevContent,
          [name]: value
        };
      })
    }


    useEffect(() => {
//do something here...
    }, [schedulecontent.email,schedulecontent.phone,schedulecontent.date,schedulecontent.time]);}

Answer 13

除@ azium的答案外，<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-container"> <form class="fs-form fs-form-full"> <div class="form-group"> <label class="field">What is your name?</label> <input type="text" class="form-control"> <div class="border"></div> </div> <div class="form-group hide-tab"> <label class="field">What is your mobile number?</label> <input type="text" class="form-control"> <div class="border"></div> </div> <div class="form-group hide-tab"> <label class="field">What is your email address?</label> <input type="email" class="form-control"> <div class="border"></div> </div> <div class="form-group hide-tab"> <label class="field">What type of event do you want us to organize?</label> <select class="form-control"> <option>Dance Events</option> <option>Birthday Events</option> <option>Family Gathering Events</option> <option>Marathon Events</option> <option>Awards Ceremony</option> <option>Art Competition</option> </select> <div class="border"></div> </div> <div class="form-group hide-tab"> <label class="field">Breif your thoughts</label> <textarea class="form-control"></textarea> <div class="border"></div> </div> <div class="form-group hide-tab"> <label class="field">Schdule Meeting</label> <input type="date" class="form-control"> <div class="border"></div> </div> <div class="form_group"> <button type="submit" class="btn btn-primary" id="button">Continue</button> </div> </form> </div>应放在<input>标记内，然后<form>有效

React不会渲染自动完成功能

13 个答案: