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

Question

我正在开发旧版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>);
    }

我如何在不撤消所有键绑定并将其重新绑定的情况下停止密码和电子邮件上的这种行为？

Answer 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。