Reactの子コンポーネントにイベントハンドラを渡す方法

Question

Reactで作成した<Button />コンポーネントがあります。このコンポーネントは、アプリケーションのスタイリングの一部を抽象化しています。私は2つの異なる状況でそれを使用しています.1つはログインフォームを送信し、もう1つは登録ページ（および将来的には他のコンテキスト）に移動します。

イベントハンドラを親コンポーネントから<Button />に渡す方法を理解しようとしています。私は、ログインフォームのonSubmitハンドラを呼び出すが、ナビゲーションボタンのハンドラはonClickとしたい。これは可能ですか？私もちょうどコンポーネントがロードされたときに実行する機能を引き起こし矢印機能を、削除しようとした

<Button text={callToAction} style={styles.callToActionButton} onClick={() => FlowRouter.go("Auth")}/> 

<Button text="Go!" style={styles.registerButton} onSubmit={() => this.register(this.state.user, this.state.password)}/> 

：

は、私はこのようなコンポーネントを呼び出して試してみました

// executes event handlers on page load 
<Button text={callToAction} style={styles.callToActionButton} onClick={FlowRouter.go("Auth")}/> 

<Button text="Go!" style={styles.registerButton} onSubmit={this.register(this.state.user, this.state.password)}/> 

Answer 1

タグに、あなたがするのonClickハンドラを転送することができます。このようになります我々はまた、セットアップカスタムのonClick機能Buttonコンポーネントで

あなたのボタンクラスをプロパティとして渡します。これは、ボタンコンポーネントのpropTypeを定義するだけで、必要な小道具を作ることができます。一例として、

、私はそれがまた

var StyledButton = React.createClass({ 
 
    propTypes: { 
 
    // the StyledButton requires a clickHandler 
 
    clickHandler: React.PropTypes.func.Required, 
 
    // and I guess the text can be seen as required as well 
 
    text: React.PropTypes.string.required 
 
    }, 
 
    render: function() { 
 
    // as you are sure you have a clickHandler, you can just reference it directly from the props 
 
    return <button type="button" onClick={this.props.clickHandler}>{this.props.text}</button>; 
 
    } 
 
}); 
 

 
var MyForm = React.createClass({ 
 
    getInitialState() { 
 
    return { 
 
     clicked: 0 
 
    }; 
 
    }, 
 
    click() { 
 
    this.setState({clicked: this.state.clicked+1}); 
 
    \t alert('ouch'); 
 
    }, 
 
    secondClickHandler() { 
 
    this.setState({clicked: 0}); 
 
    alert(':('); 
 
    }, 
 
    render() { 
 
    // your parent component simply sets which button 
 
    return <fieldset> 
 
     <div> 
 
    \t <StyledButton clickHandler={this.click} text="Click me" /> 
 
      { (this.state.clicked > 0) && <StyledButton clickHandler={this.secondClickHandler} text="Not again" /> } 
 
     </div> 
 
    </fieldset>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <MyForm />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

をどのように働くかを示す小さなスニペットを追加し、あなたは一般的な使用中のボタンの方法を提出しないと、あなたはむしろだろう受信したデータをWebサービスに送信し、結果を受け取ったときに変更を処理します。サブミットは現在のウェブサイトを殺し、新たにすべてをロードする必要がありますが、Ajaxコールやストアでは、結果を待ってからレスポンスに基づいてユーザーをリダイレクトできます。

Answer 2

これをどのように処理したかは、タグをレンダリングするボタンコンポーネントを持っていることです。そして、href propと渡すことができるonClick propがあります。リンクがhref propをボタンに渡すだけで、それはonClickプロで関数を渡すだけですpタグに設定されていることを確認してください。

_onClick: function(e) { 
    if (!this.props.onClick) { 
    return; 
    } 
    this.props.onClick(e); 
} 

、その後、一般的には

<a href={this.props.href} onClick={this._onClick} />