ReactJS - 有没有办法通过在 <input/> 中按“Enter”键来触发方法？

Question

仅使用 onChange 和值，同时集中在 <input/> 中，最好不使用 jQuery，有没有办法通过按“Enter”键触发方法？因为，只希望用户按“Enter”键以更新 name 字符串状态。

这是代码：

   constructor(props) {
    super(props);

    this.state = {
      name: '',
    }
  }

  textChange(event) {
    this.setState({
      name: event.target.value,
    })
  }

  //Would like to trigger this once 'Enter' key is pressed while focused inside `<input/>`
  enterPressed() {
    var name = this.state.name;
  }

  render() {
    return (
        <input
          placeholder='Enter name'
          onChange={this.textChange.bind(this)}
          value={this.state.name}
        />
    )
  }

原文由 user3259472 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以做的是像这样使用 React 的关键事件：

 <input
    placeholder='Enter name'
    onChange={this.textChange.bind(this)}
    value={this.state.name}
    onKeyPress={this.enterPressed.bind(this)}
/>

现在，要检测回车键，将 enterPressed 函数更改为：

 enterPressed(event) {
    var code = event.keyCode || event.which;
    if(code === 13) { //13 is the enter keycode
        //Do stuff in here
    }
}

所以它所做的是向输入元素添加一个事件侦听器。请参阅 React 的键盘事件。函数 enterPressed 然后在事件上触发，现在 enterPressed 检测键码，如果是13，做一些事情。

这是一个演示事件的 小提琴。

---

注意： onKeyPress 和 onKeyDown 事件在用户按下时立即触发。您可以使用 onKeyUp 来解决这个问题。

原文由 Andrew Li 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 onKeyPress 和生成的事件对象的 key 属性，这是 React 为您规范化的跨浏览器：

 <meta charset="UTF-8">
<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<div id="app"></div>
<script type="text/babel">

var App = React.createClass({
  getInitialState() {
    return {
      name: ''
    }
  },
  handleChange(e) {
    this.setState({name: e.target.value})
  },
  handleKeyPress(e) {
    if (e.key === 'Enter') {
      alert('Enter pressed')
    }
  },
  render() {
    return <input
      placeholder='Enter name'
      onChange={this.handleChange}
      onKeyPress={this.handleKeyPress}
      value={this.state.name}
    />
  }
})

ReactDOM.render(<App/>, document.querySelector('#app'))

</script>

原文由 Jonny Buchanan 发布，翻译遵循 CC BY-SA 3.0 许可协议