web-dev-qa-db-ja.com

ReactJS-<input />内でEnterキーを押してメソッドをトリガーする方法はありますか？

onChangeと値のみを使用し、<input/>の内部に焦点を合わせながら、できればjQueryを使用せずに、Enterキーを押してメソッドをトリガーする方法はありますか？なぜなら、ユーザーはname文字列の状態を更新するために「Enter」キーを押すことだけを望んでいるからです。

これがコードです：

  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}
        />
    )
  }
javascripthtmlcssreactjsreact-jsx
11
user3259472

あなたができることは、Reactの主要なイベントを次のように使用することです。

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

Enterキーを検出するには、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の場合はいくつかの処理を行います。

これが fiddle でイベントを示しています。

注：onKeyPressおよびonKeyDownイベントは、ユーザーが押すと即座にトリガーされます。 onKeyUpを使用してこれと戦うことができます。

23
Andrew Li

onKeyPressと、結果のイベントオブジェクトのkeyプロパティを使用します。これは、Reactによって正規化されたクロスブラウザーです。

<meta charset="UTF-8">
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>
2
Jonny Buchanan

OnKeyPressを入力に追加して、実行する関数と同じにすることができます。引数として関数に渡されるイベントを使用して、押されたキーがEnterキーであることを確認する必要があるだけです。

残念ながら、この結果を得るためにonchangeメソッドだけを使用することはできません

1
finalfreq