Доступ к this.props из функций React Component

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) в состоянии получить доступ this.props, который был передан в этот Реагировать компонент User, но this.displayGender.bind(this) видит this.props как undefined?

До сих пор я могу получить только 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. Но это не имело бы смысла, чтобы добавить его в качестве дочернего узла

Answer 2

Почему this.toggleGender.bind (это) в состоянии получить доступ this.props, который был , переданный в React компонент User, но this.displayGender .bind (this) видит this.props как undefined?

Я не уверен, что необходимо связать «это» с отображениемGender, потому что в отличие от toggleGender он уже должен быть привязан к правильному объекту по умолчанию. Я считаю, что вы должны иметь доступ к this.props от displayGender, просто вызвав метод.

Раздел Handling Events в документах React может быть полезен.