Question

在下面的代码中，当我点击＆＃34;添加行＆＃34;时，为什么调用方法handleColumnAdded？按钮？

我只想从Line组件中访问我的组件的方法。

addLine(){
  var lineArray = this.state.lines;
  var line = {id:(lineArray.length+1),text:'hello'};
  lineArray.push(line);
  this.setState({
    lines : lineArray
  });
}
handleColumnAdded(){
  console.log("handleColumnAdded");
}
render() {
  var me = this;

    var lines = this.state.lines.map(function(line) {
        return (
            <Line key={line.id} data={line} onColumnAdded={me.handleColumnAdded()}/>
        );
    });

  return (
    <div>          
      <div>
          {lines}
      </div>
      <button onClick={this.addLine.bind(this)}>Add line</button>
    </div>
  );
}

Answer 1

更改此行

 <Line key={line.id} data={line} onColumnAdded={me.handleColumnAdded()}/>

到这个

 <Line key={line.id} data={line} onColumnAdded={me.handleColumnAdded}/>

原因：

onColumnAdded需要一个函数，但是当你包含()时，你正在调用该函数。当你这样做时，函数会立即被调用，而不是以多事的方式被调用。

Reactjs - 为什么在状态发生变化时调用组件的回调方法？

1 个答案: