reactjs es6，.map函数不会触发onclick | map函数不会触发onclick

本文介绍了reactjs es6，.map函数不会触发onclick的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Reactjs，ES6问题:.map函数中的非常简单的onclick事件不起作用.当我检查它时，handleclick函数中的这个表示_this5，而.map绑定中的这个表示_this6.

Reactjs, ES6 issue: Very simple onclick event in a .map function not working. When I inspect it, this in handleclick function represent _this5 and this in .map bind represents _this6.

class LineItem extends React.Component{
  constructor(props){
    super(props);
  }
  handleClick=(event)=> {
    console.log(this);
  }
  render(){
    return(
      <div>
        {
          this.props.Lines.map((line,i)=> {
                  return <div className="subcontent">
                          <div className="row-wrapper plan-content">
                            <Row className="show-grid" onClick={this.handleClick()}>
                              <span>{line.lineName}</span>
                            </Row>
                          </div>
                          <LineStatus LineInfo={line} Camp={this.props.Camp} key={i}/>
                        </div>;
                }, this)
              }
    </div>

推荐答案

现在，您正在调用函数并将返回值用作onClick.您只想像这样传递函数引用:

Right now you are calling the function and using the return value as the onClick. You just want to pass the function reference like this:

<Row className="show-grid" onClick={this.handleClick}>

这篇关于reactjs es6，.map函数不会触发onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！