ReactJS

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

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

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

Answer 2

你可以像这样使用 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 然后在事件上被触发，现在 enterPressed 检测到键码，如果是 13，就做一些事情。

这是一个 fiddle 演示事件。

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

Answer 3

使用 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>

Answer 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")
    }
}}
/>;

Answer 5

这里有一个根据你的情况使用 onpress 事件的例子：

handleKeyPress(e) {
    if(e.key === 'Enter' || e.which === 13){
      console.log('enter key pressed');
      // call your method here
     }
  }

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

当您按下输入字段内的任意键时，它会调用正在接收事件的函数 handleKeyPress。从该事件中，您正在检查按下的键是否为 Enter 键。您也可以使用输入值。例如let value = e.target.value;

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

ReactJS - Is there a way to trigger a method by pressing the 'Enter' key inside <input/>?

html

javascript

css

react-jsx