web-dev-qa-db-ja.com

react-bootstrap入力コンポーネントにキーイベントハンドラーを入力します

ボタン付きのInputコンポーネント（buttonAfterプロパティ）があり、ボタンに関連付けられたonClickハンドラーを設定しているため、ユーザーはテキストを入力してボタンをクリックして起動できます正しい行動。

ただし、UIを使いやすくするために、ボタンをクリックするのと同じ効果を得るために、ユーザーが[Enter]キー（キーコード13）を押すことができるようにしたいと思います。

私はそれを行う方法を見つけることができませんでした。もちろん、キーダウンイベントのハンドラーを登録するためにonKeydownを試しましたが、それは無視されます。

reactjsreact-bootstrap
24
mguijarr

この質問は、react-bootstrapではなく、React自体に関連していると思います。

Reactイベントシステム： https://facebook.github.io/react/docs/events.html に関する基本事項については、こちらをご覧ください。

OnKeyDown、onKeyPress、またはonKeyUp React=を使用すると、ハンドラーに、次のプロパティを持つ「ターゲット」オブジェクトのインスタンスが渡されます。

ブールaltKey
number charCode
...（上記のすべてのリンクを参照）

そのため、次のようなことができます。

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'react-bootstrap';

class TestInput extends React.Component {

handleKeyPress(target) {
  if(target.charCode==13){
    alert('Enter clicked!!!');    
  } 
}

render() {
  return (
    <Input type="text" onKeyPress={this.handleKeyPress} />
  );
 }
}

ReactDOM.render(<TestInput />, document.getElementById('app'));

上記のコードをテストし、動作します。これがあなたのお役に立てば幸いです。

42
baudo2048

質問は、React-bootstrapに関連する場合もあります。 React-bootstrapには、ボタンやEnterキー、フォーム要素が押されたときにインスタンスを処理する方法もあります。

以下のコードは、Reactハンドラーを使用せずにEnterキーが押されたときにインスタンスを処理する方法を説明しています。

import React from "react";
import ReactDOM from "react-dom";
import { FormGroup, FormControl } from "react-bootstrap";

class TestInput extends Component {

  search() {
    console.log("Enter Button Pressed");
  }

  render() {
    return (
      <FormGroup>

        <InputGroup>
          <FormControl
            placeholder="Press Enter"
            type="input"
            onKeyPress={event => {
              if (event.key === "Enter") {
                this.search();
              }
            }}
          />
        </InputGroup>

      </FormGroup>
    );
  }
}

React Bootstrapは入力フォーム要素をサポートしなくなりました。代わりに、自由に使えるアイテムを以下に紹介しました。

FormGroupコンポーネントは、ラベル、ヘルプテキスト、および検証状態のサポートとともに、適切な間隔でフォームコントロールをラップします。

フォームコントロールをInputGroupでラップし、通常のアドオンとボタンアドオンに使用します。

FormControlコンポーネントは、Bootstrapスタイル設定でフォームコントロールをレンダリングします。

参照：

https://react-bootstrap.github.io/components.html#formshttps://react-bootstrap.github.io/components.html#forms-input-groups

11
aash20

キャッチされないTypeError：未定義のプロパティ 'charCode'を読み取ることができません

以下を使用する必要があります。

handleKeyPress(target) {
  if (target.key === 'Enter') {
    alert('Enter clicked!!!');
  }
}
0
Hello Earth