Question

仅使用onChange和值并且在<input/>内聚焦时，最好不使用jQuery，有一种方法可以通过按下“输入”来触发方法。键？因为，只希望用户按“输入”键。 key以更新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's Keyboard Events。然后，在事件中触发函数enterPressed，现在enterPressed会检测到密钥代码，如果是13，则执行某些操作。

这里有fiddle来证明这一事件。

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

Answer 2

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

不幸的是，不能仅仅使用onchange方法来获得此结果

Answer 3

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

＆＃13;

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

＆＃13;

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

ReactJS - 有没有办法通过按“输入”来触发方法。键入<input />？

4 个答案: