reactstrap和Chrome自动填充功能将密码输入电子邮件

Question

在我的React应用程序中（使用reactstrap和引导程序），我有一个登录表单，其中包含两个字段，电子邮件和密码。

<Input
   type="email"
   name="email"
   id="emailInput"
   onChange={this.handleInputChange}
   value={this.state.email}
   placeholder="email"/>

当组件渲染chrome自动填充字段时，电子邮件的状态将更改为chrome放置的内容，然后组件重新呈现。

根据登录组件中的某些逻辑，电子邮件状态可能会再次this.setState({email:''})更改为空字符串。

现在密码仍然存在，但是单击电子邮件字段（该字段现在为空），chrome自动填充弹出并显示已保存的电子邮件/密码，单击后，将在电子邮件中填充密码字段代替电子邮件。

使用标准HTML input标记不存在该问题。我没有尝试使用其他UI库，但使用了reactstrap Input。

有人有这样的经历吗？

the propTypes of reactstrap

P.S。

  handleInputChange = ({ target: { name, value } }: React.ChangeEvent<HTMLInputElement>) => {
    this.setState((prevState) => ({ ...prevState, [name]: value }));
  };