Pourquoi mon composant est-il en rupture si je fais référence à une méthode dans `onClick` dans une« carte »?

La chose la plus stupide se passe avec mon code maintenant. J'ai une liste d'articles dans le DOM, j'ai besoin de mettre un bouton pour appeler une autre fonction, si je place le bouton comme <button></button> tout est correct, mais si j'attribue une fonction à cela Bouton, alors tout descend <button onClick={function}></button> Je vous montrerai mon code, regardez

 @connectToStores export default class Dealers extends Component { static contextTypes = { router : React.PropTypes.func, } static propTypes = { title : React.PropTypes.func, } constructor (props) { super(props); this.state = { modal : false, } } static getStores () { return [ GetDealersStore ]; } static getPropsFromStores () { return GetDealersStore.getState(); } render () { let dealersInfo; if (this.props.dealerData !== null) { dealersInfo = this.props.dealerData.dealersData.map(function(dealer) { return (<div key={dealer.DealerId} style={Styles.dealerCard}> <Card> <CardHeader title={dealer.NickName} subtitle={dealer.DealerId} avatar={dealer.Picture}/> <CardText> <FloatingActionButton> //////////////////////// <IconAdd /> //////THIS IS THE BUTTON///// </FloatingActionButton>////////////////////// </CardText> </Card> </div> ); }); } else { dealersInfo = <p>Loading . . .</p>; } return ( <Grid> <Row> <Column><h4>Dealers</h4></Column> </Row> <div style={Styles.mainCont}> {dealersInfo} </div> </Grid> ); } componentWillMount () { GetDealersActions.getDealers(); } _openUpdateDealer = () => { console.log(123); } }

Comme vous pouvez le voir, il y a une déclaration

 if (this.props.dealerData !== null) { ... }else { dealersInfo = <p>Loading . . .</p>; }

Comme j'ai collé le code ci-dessus, tout fonctionne génial, mais si j'ajoute <FloatingActionButton onClick={this._openUpdateDealer.bind(this)}><IconAdd /></FloatingActionButton> alors tout descend, tout ce que je vois dans l'écran est Loading . . . Loading . . . Qui est l' else dans la déclaration ci-dessus.

Alors, je veux savoir, qu'est-ce qui se passe réagir ici?

Vous représentez le bouton au milieu d'une opération .map :

 this.props.dealerData.dealersData.map(function(dealer) {

Qui utilise une valeur différente pour this ; Par conséquent, this.props n'existe pas dans la fonction. Je m'attends à voir cannot read property dealerData of undefined dans la console du navigateur.

Vous devez utiliser le paramètre optionnel thisArg :

 this.props.dealerData.dealersData.map(function(dealer) { // ... }, this);

Lier manuellement la fonction de cartographie :

 this.props.dealerData.dealersData.map(function(dealer) { // ... }.bind(this));

Ou utilisez une fonction de flèche (puisque vous utilisez les fonctions ES6):

 this.props.dealerData.dealersData.map((dealer) => { // ... });