React Component関数からthis.propsにアクセスする

Question

私はReact.jsを初めて使用しており、次の2つの関数displayGenderとtoggleGenderがどのようにしてthis.propsにアクセスするのかがわかりません。

import React, { Component } from 'react'; 


export default class User extends Component { 

    displayGender() { 
     console.log('displayGender: ', this.props) 
    } 

    toggleGender() { 
     console.log('toggleGender: ', this.props) 
    } 

    render() { 
     return (
      <Button onClick={ this.toggleGender.bind(this) } > 
       { this.displayGender.bind(this) } 
      </Button> 
     ); 
    } 
} 

なぜthis.toggleGender.bind(this)は、コンポーネントUserに反応これに渡されたthis.propsにアクセスすることが可能であるが、this.displayGender.bind(this)はundefinedとしてthis.propsを見ていますか？

これまでのところ、this.propsはthis.displayGenderからアクセスすることができます。これは通常の練習ですか？

export default class User extends Component { 

    displayGender(props) { 
     console.log(props.user) 
    } 

    render() { 
     return (
      <Button onClick={ this.toggleGender.bind(this) } > 
       { this.displayGender(this.props) } 
      </Button> 
     ); 
    } 
} 

Answer 1

あなた this.toggleGender.bind(this)機能は、あなたのコンポーネントで clickイベントとして追加され、 this.displayGender.bind(this)は通常言及何バインド <button>

内部の子ノードとして追加されるためですput the given function inside some other anonymous enclosed function (and preserve the context ie, this if supplied)

そうです

：toggleGender.bind(this)通常function(){toggleGender()}

上記をclick機能に置くと、 click eventに関数を追加しているので意味があります。なぜthis.toggleGender.bind（これは） このリアクトコンポーネントユーザーが、this.displayGenderに渡されたthis.propsにアクセスすることが可能であるが、それは子ノードとして

Answer 2

を、それを追加しても意味がありません.bind（this） はthis.propsを未定義と見なしますか？

私は、toggleGenderとは異なり、デフォルトで正しいオブジェクトに既にバインドされている必要があるため、「this」をdisplayGenderにバインドする必要はないとは確信していません。このメソッドを呼び出すだけで、displayGenderからthis.propsにアクセスできるはずです。

リアクト・ドックのHandling Eventsセクションが参考になる場合があります。