如果我在`map`中引用`onClick`中的方法，为什么我的组件会破坏？ [英] Why is my component breaking if I reference a method in `onClick` within a `map`?

问题描述

现在我的代码发生了最愚蠢的事情。我有一个在DOM中呈现的项目列表，我需要放一个按钮才能调用另一个函数，如果我按下这样的按钮< button>< / button> 一切正常，但如果我为该按钮分配一个功能，那么一切都会失效< button onClick = {function}>< / button> I会告诉你我的代码，看看

The most stupid thing is happening with my code right now. I have a list of items render in the DOM, I need to put a button in order to call another function, if I put the button like this <button></button> everything is ok, but if I assign a function to that button, then everything goes down <button onClick={function}></button> I will show you my code, look

@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);
  }
}

你可以看到有一个声明

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

因为我粘贴上面的代码一切都很棒，但如果我添加< FloatingActionButton onClick = {this._openUpdateDealer.bind（this）}>< IconAdd />< / FloatingActionButton> 然后一切都下降了，我在屏幕上看到的一切是正在加载。 。 。上面的语句中的 else 。

as I pasted the code above everything works awesome, but if I add <FloatingActionButton onClick={this._openUpdateDealer.bind(this)}><IconAdd /></FloatingActionButton> then everything goes down, all I see in the screen is Loading . . . which is the else in the statement above.

所以，我想要知道，这里有什么反应吗？

So, I want to know, what is going on with react here ?

推荐答案

你正在<$ c $中间呈现按钮c> .map 操作：

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

为使用不同的值;因此， this.props 在函数内部不存在。我希望看到无法读取未定义的属性dealerData 在浏览器控制台中。

which uses a different value for this; thus, this.props doesn't exist inside the function. I would expect to see cannot read property dealerData of undefined in the browser console.

您需要使用可选 thisArg 参数：

You need to use the optional thisArg parameter:

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

手动将映射函数绑定到此 ：

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

或使用一个箭头功能（因为你正在使用ES6功能）：

or use an arrow function (since you're using ES6 features):

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

这篇关于如果我在`map`中引用`onClick`中的方法，为什么我的组件会破坏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！