Question

我喜欢做出反应，我正在使用角度1然后切换到反应，我喜欢反应，但面对使用它的痛苦问题 - 开发形式。在反应中我不能使用自动填充，因为该字段有一个onChange事件。使用imacro自动填充根本不起作用。

<input onChange={this.handleChange} />

因此，我很难测试我的表单是否包含许多字段，如复选框，自定义编辑器，下拉列表等。我必须在每个字段中手动输入值。

Answer 1

要使自动填充生效，您必须为输入定义“名称”属性。

<input name="firstName" onChange={this.handleChange} value={this.state.firstName} />

我只在React和Chrome上进行过测试，但是我认为这也适用于其他浏览器。

尽管社区在线发布了许多“ hacky”解决方案，但我发现此解决方案最简单。

如果您觉得此功能有用，请喜欢。不得不浏览很多站点和评论才能找到它。

原始github评论here。

Answer 2

要自动填充，您应使用受控输入字段

 <input onChange={this.handleChange} value={this.state.inpVal} />

现在，您可以从您存储的任何位置获取的数据初始化状态，以自动填充值

但是，如果您使用的是redux，而不是使用props，那么您将使用props来设置redux存储中的值

 <input onChange={this.handleChange} value={this.props.inputForm.inpVal} />

考虑inputForm是指当前形式的支柱

Answer 3

使用imacro自动填充根本不起作用。

如果您主要关注自动测试，则可以使用Kantu来模拟真正的鼠标点击（与iMacros或Selenium IDE使用的DOM级点击事件相反）。

Answer 4

Truchainz的点具有name属性，但是还有很多其他方面可以使其可靠地工作。

要正常处理自动填充，您需要让浏览器控制表单。由于认为安全问题（密码/个人数据泄漏），浏览器在自动填充表单时不会触发onChange函数，因此最好将表单状态留给浏览器。

您需要给字段一个name的原因是，浏览器会将输入值附加到您提供的名称的Submit事件中。因此，保持所有输入不受控制，您需要做的就是使用一个type="submit"按钮触发浏览器自己的表单提交。

这大概是这样的：

const handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target.email.value)
  console.log(event.target.password.value)
}
return (
  <form onSubmit={handleSubmit}>
    <input name="email" type="email" />
    <input name="password" type="password" />
    <button type="submit">Submit</button>
  </form>
);

这主要是基于thomasjulianstoelen在链接的问题线程https://github.com/facebook/react/issues/1159#issuecomment-506584346中的回答，对我来说效果很好。

自动填写反应不起作用

4 个答案: