Question

在下面的代码中，onclick函数 testNewBug 无法访问其父组件的状态＆＃39; BugList＆＃39;。任何人都可以看到我出错的地方，我正确设置状态并可以在DevTools中查看它，当然可以使用组件中的功能＆＃39; this.state＆＃39;应该工作吗？

class BugList extends React.Component {

  constructor() {
    super();
    this.state = {
      bugs: bugData
    }
  }

  render() {
    console.log("Rendering bug list, num items:", this.state.bugs.length);
    return (
      <div>
        <h1>Bug Tracker</h1>
        <BugTable bugs={this.state.bugs} />
        <button onClick={this.testNewBug}>Add Bug</button>
      </div>
    )
  }

  testNewBug() {
      var nextId = this.state.bugs.length + 1;
      this.addBug({id: nextId, priority: 'P2', status:'New', owner:'Pieta', title:'Warning on console'})
  }

  addBug(bug) {
      console.log("Adding bug:", bug);
      // We're advised not to modify the state, it's immutable. So, make a copy.
      var bugsModified = this.state.bugs.slice();
      bugsModified.push(bug);
      this.setState({bugs: bugsModified});
  }

}

Answer 1

哦，亲爱的，我是个白痴，我忘了将我的事件处理程序绑定到这个＆＃39;

<button onClick={this.testNewBug.bind(this)}>Add Bug</button>

Answer 2

如果您知道该方法将始终绑定到当前类实例，您始终可以使用=>定义您的方法：

testNewBug = () => {
      var nextId = this.state.bugs.length + 1;
      this.addBug({id: nextId, priority: 'P2', status:'New', owner:'Pieta', title:'Warning on console'})
  }

你不必担心bind(this)遍布整个地方，这可以确保函数每个类都有一个实例。

React JS - Component中的函数无法查看State

2 个答案: