HTML 密码输入仍在侦听键绑定，而其他输入忽略绑定答案

【问题标题】：HTML password input still listening to key bindings while other inputs ignore the bindingsHTML 密码输入仍在侦听键绑定，而其他输入忽略绑定
【发布时间】：2020-05-22 22:15:55
【问题描述】：

我正在开发一个旧版 React 应用程序。项目中有键绑定。对于此示例，假设当用户单击“F”时，应用程序将进入全屏状态。问题是此键绑定对于某些输入字段（例如电子邮件和密码）是活动的。

当我在一个未标记的输入字段中输入，并输入“F”时，什么也没有发生，例如：

<input
      value={this.state.firstName}
      placeholder="First Name"
      name="firstName"
      required
      onChange={(event) => {return this.handleChange(event, 'firstName', event.target.value)}}/>

但是，如果我有电子邮件或密码作为标签，那么当我输入“F”时，它会像全屏一样进入

<input
      value={this.state.password}
      placeholder="Password"
      name="password"
      label="password"
      required
      onChange={(event) => {return this.handleChange(event, 'password', event.target.value)}}/>

  private handleChange = (event: any, key: string, value: string) => {
        event.preventDefault();
        this.setState<never>({ [key]: value } as Partial<LoginFormState>);
    }

如何在不撤消所有键绑定并重新绑定它们的情况下阻止密码和电子邮件的这种行为？

【问题讨论】：

能否提供handleChange代码块
好电话，刚刚成功！

标签： html reactjs input key-bindings

【解决方案1】：

你试过用event.preventDefault()吗？

<input
  value={this.state.password}
  placeholder="Password"
  name="password"
  label="password"
  required
  onChange={(event) => {
    event.preventDefault();
    return this.handleChange(event, 'password', event.target.value);
  }}
/>

虽然我不确定这是一个干净的解决方案，但您可能希望提供更多详细信息以获得更好的解决方案。

我刚刚注意到，你不应该将event.target.value 作为参数传递，因为你已经传递了event。您可以直接访问event.target.value 到this.handleChange。

【讨论】：

好建议，但我确实设置了event.preventDefault();。