☰

Enterキーを押した後にonChangeイベントを呼び出すには質問する

tag-icon • tag-icon javascript twitter-bootstrap reactjs
Enterキーを押した後にonChangeイベントを呼び出すには質問する

私は Bootstrap を初めて使い、この問題で困っています。入力フィールドがあり、数字を 1 つ入力するとすぐに関数がonChange呼び出されますが、数字全体が入力されたときに Enter キーを押したときに呼び出されるようにしたいのです。検証関数でも同じ問題があり、すぐに呼び出されます。

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
  //bsStyle: this.validationInputFactor(),
  placeholder: this.initialFactor,
  className: "input-block-level",
  onChange: this.handleInput,
  block: true,
  addonBefore: '%',
  ref:'input',
  hasFeedback: true
});

ベストアンサー1

によるとリアクトドキュメントonKeyPress、や のようなキーボード イベントをリッスンできますがonKeyUp、 はリッスンできませんonChange。

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

更新: React.Component を使用する

同じことを行うReact.Componentを使用したコードは次のとおりです。

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

こちらはjsfiddle。

アップデート2: 関数コンポーネントを使用する

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}

おすすめ記事