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

【问题标题】：ReactJS - Is there a way to trigger a method by pressing the 'Enter' key inside <input/>?ReactJS - 有没有办法通过按 <input/> 中的“Enter”键来触发方法？
【发布时间】：2017-01-19 10:12:25
【问题描述】：

仅使用 onChange 和 value 并专注于 <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}
        />
    )
  }

【问题讨论】：

标签： javascript html css reactjs react-jsx

【解决方案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's Keyboard Events。然后函数enterPressed在event上触发，现在enterPressed检测到key code，如果是13，做一些事情。

这是一个 fiddle 演示活动。

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

【讨论】：

event.keyCode 做什么 || event.which 做什么？
@LyManeug 实际上，它取决于浏览器，请参阅here。如果浏览器不支持keyCode 或which，这是一件好事。 || 只是根据其他选项是否为空或未定义/不受支持来选择一个选项，基本上是一个后备。
澄清一下，是否应该使用onKeyUp up 而不是onKeyPress？对哪一个是正确的实施感到困惑。
感谢您的澄清，但您说的返回是什么意思？
@LyManeug 我的意思是停止互动。基本上按下回车键就按下去，抬起键就按下去

【解决方案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>

【讨论】：

如果我想将 a 按钮链接到与 handleKeyPress(e) 相同的方法，我将如何确定按钮是否触发它。例如，想做if(e.key === 'Enter' || //button triggered it)之类的事情吗？
您能否为您尝试创建的 UI 提供 render() 的示例？最简单的方法是为按钮设置一个单独的onClick 并调用另一个方法，并让文本输入的onKeyPress 在按下Enter 时也调用这个其他方法。

【解决方案3】：

您可以在输入中添加 onKeyPress 并使其等于您要执行的功能。您只需要确保按下的键是使用作为参数传递给函数的事件的回车键

很遗憾不能单独使用onchange方法得到这个结果

【讨论】：

抱歉，在我接受答案并投票之前，您能否举个例子，特别是如何确定按下的键是否是回车键？

【解决方案4】：

你只需像这样触发一个函数，

<input type="text"
 onKeyPress={(event) => {
    var key = event.keyCode || event.which;
    if (key === 13) {
        // perform your Logic on "enter" button 
        console.log("Enter Button has been clicked")
    }
}}
/>;

【讨论】：