ReactJS-是否可以通过按内部的Enter键来触发方法？

小编典典

ReactJS-是否可以通过按内部的Enter键来触发方法？

reactjs

仅使用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}
        />
    )
  }

阅读 569

2020-07-22

共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用来解决这个问题。

2020-07-22