Question

在下面的示例中，每次用户键入字母（如onChange）事件时，都会触发onkeydown事件，这是正常现象吗？

import React from 'react';

export default class Form extends React.Component {
  state = { name: '' };

  _handleNameChanges = ({ target }) => {
    this.setState({ name: target.value });
  };

  render() {
    return (
      <form>
        <input
          type="text"
          name="name"
          placeholder="John Doe"
          onChange={this._handleNameChanges}
          required
        />
      </form>
    );
  }
}

Answer 1

是的，这是正常现象，发生的情况是，一旦按下键盘键，就会在字符输入到表单字段中之前触发onKeyDown。并且onChange仅在字段更改时才会触发。所以第一个导致了第二个。

<input 
     onKeyDown={e => {e.stopPropagation(); e.preventDefault()}}
     onChange={e => console('never fires')}
/>

Answer 2

是的，您可以在React docs

中看到更多信息

onChange事件的行为与您预期的一样：每当更改表单字段时，都会触发此事件。我们有意不使用现有的浏览器行为，因为onChange是其行为的误称，并且React依赖于此事件来实时处理用户输入。

附带一些示例：https://reactjs.org/docs/forms.html

Answer 3

如上所述，React 将 onChange 映射到 onInput（参见 here）。尽管如此，解决方案是改用 onBlur。

为什么Input onChange在ReactJs中的行为类似于onKeyDown？

3 个答案: