你可以使用onKeyPress直接在输入字段。onChange函数在每次输入字段变化时改变状态值，在按下Enter后，它将调用一个函数search()。

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>

您还可以像这样编写一个小的包装器函数

const onEnter = (event, callback) => event.key === 'Enter' && callback()

然后在输入中消费它

<input 
    type="text" 
    placeholder="Title of todo" 
    onChange={e => setName(e.target.value)}
    onKeyPress={e => onEnter(e, addItem)}/>

你可以使用event.key

function Input({onKeyPress}) { return ( <div> <h2>Input</h2> <input type="text" onKeyPress={onKeyPress}/> </div> ) } class Form extends React.Component { state = {value:""} handleKeyPress = (e) => { if (e.key === 'Enter') { this.setState({value:e.target.value}) } } render() { return ( <section> <Input onKeyPress={this.handleKeyPress}/> <br/> <output>{this.state.value}</output> </section> ); } } ReactDOM.render( <Form />, document.getElementById("react") ) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react"></div>

我更喜欢onKeyUp，因为它只在键被释放时才会触发。另一方面，如果用户出于某种原因按下并按住键，onKeyDown将触发多次。例如，当监听“按下”Enter键发出网络请求时，您不希望多次触发该请求，因为代价可能很高。

// handler could be passed as a prop
<input type="text" onKeyUp={handleKeyPress} />

handleKeyPress(e) {
  if (e.key === 'Enter') {
    // do whatever
  }
}

另外，不要使用keyCode，因为它有时会被弃用。

根据React Doc，你可以监听键盘事件，比如onKeyPress或onKeyUp，而不是onChange。

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

更新:使用React。组件

下面是使用React的代码。组件，它做同样的事情

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

这是jsfiddle。

更新2:使用功能组件

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}

const [value, setValue] = useState("");

const handleOnChange = (e) => {
    setValue(e.target.value);
};

const handleSubmit = (e) => {
    e.preventDefault();
    addTodoItem(value.trim());
    setValue("");
};

return (
    <form onSubmit={handleSubmit}>
        <input value={value} onChange={handleOnChange}></input>
    </form>
);