58

私は最近、 を使い始めましたReactJS。具体的には、react-railsルビーの宝石とreact-bootstrapコンポーネントを利用しています。

onClick子コンポーネントにイベント リスナーを配置することについて質問があります。

以下のコード サンプルからわかるように、render関数内で子コンポーネントを「呼び出す」親コンポーネントがあります。その関数内には、クリックされたときに呼び出すrenderReactonClickリスナーがあります。handleToggle

###* @jsx React.DOM ###

ToggleIconButton = React.createClass
  getInitialState: ->
    toggleOn: false
  handleToggle: (evt) ->
    this.setState(toggleOn: !this.state.toggleOn)
  render: ->
    `<IconButton onClick={this.handleToggle}>Toggle Button</IconButton>`

IconButton = React.createClass
  render: ->
    # BsButton and BsGlyphicon are React-Bootstrap components
    `<BsButton>
      <BsGlyphicon glyph={this.props.glyph} />
      {" " + this.props.text}
     </BsButton>`

残念ながら、これは私が思っていたようには機能しません。ToggleIconButton::handleToggle呼び出されることはありません。代わりに、onClickリスナーが配置されIconButton、参照されますToggleIconButton::handleToggle。

React 開発ツール画面

に追加の動作を追加したくありませんIconButton。私の見方では、条件付きロジックを に配置する必要はありませんIconButton。アイコンとボタンを表すだけで、ブラウザのイベントを気にする必要はありません。それToggleIconButtonがそのためです。

私はラップアラウンドしてReact DivそこにリスナーIconButtonを書くことができることを知っていonClickますが（私はこれを試しましたが、うまくいきました）、それは少しぎこちないようです。

これを行う良い方法を知っている人はいますか？みんなありがとう！

4

2 に答える 2

81

したがって、この場合にイベントを処理する適切な方法は、イベント ハンドラーを子コンポーネントに渡すことです。目的を達成するにはいくつかの方法があり、この動作を別の方法で実装することもできます (ユース ケースが何であるかはわかりません) が、親コンポーネントと子コンポーネント間の典型的なイベント処理を示す JSX の例を配線しました。ここで見つけることができます...

JSフィドル

次のように考えてみてください。

var ParentComponent = React.createClass({
    render: function(){
        return (
            <ChildComponent onSomeEvent={this.handleThatEvent} />;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

var ChildComponent = React.createClass({
    render: function(){
        return (
           <input type="button" onClick={this.props.onSomeEvent} value="Click Me!" />
        )
    }
});
于 2014-06-09T23:21:00.433 に答える
9

ノードを呼び出す前に、レンダリングの this を参照する変数を作成する場合は、子コンポーネントを作成する必要はありません。

var self = this;

たとえば、(これは不自然で、この場合は var self は必要ありませんが、ネストされた return ステートメントの場合は必要になります)。

var ParentComponent = React.createClass({
    render: function(){
        var self = this;
        return (
            <input type="button" onClick={self.handleThatEvent} value="Click Me!" />;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

さらに良いことに、これを関数にバインドできます。

var ParentComponent = React.createClass({
    render: function(){
        return (
            this.state.array.map(function(){
              return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />);
            }.bind(this));
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

または、コメントでcaptrayの提案に従う

var ParentComponent = React.createClass({
    render: function(){
        return (
            this.state.array.map(function(){
              return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />);
            }, this);
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});
于 2014-11-14T06:20:34.120 に答える