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}
        />
    )
  }

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用来打击这个.

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>