Question

我有生成树的示例代码。但它显示了this.state.action或this.onClickNode未定义的错误，而我在构造函数中定义了所有这些错误。

export default class TreeList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {tree: tree, action: null}
    this.onClickNode = this.onClickNode.bind(this)
  }
  onClickNode(node) {
    this.setState({active: node})
  }
  renderNode(node) {
    console.log(this.state.action)
    return (
      <span onClick={this.onClickNode(null, node)}>
        {node.module}
      </span>
    );
  }
  render() {
    return (
      <div>
        <Tree tree={this.state.tree} renderNode={this.renderNode}/>
      </div>
   )
 }

}

我使用过此库：https://pqx.github.io/react-ui-tree/

Answer 1

您需要将this绑定到renderNode函数，因为ES6类this为not automatically bound。否则，您的函数中将没有适当的上下文。这就是为什么this.state.action未定义以及无法解决this.onClickNode的原因。

在构造函数中，添加

this.renderNode = this.renderNode.bind(this);

此外，如果要在onClick处理程序中使用node，可以将其切换为

  onClickNode(firstParam, node) {
    return (event) => {
        this.setState({active: node})
     }
  }

我假设this.renderNode在调用render()时执行了this.onClickNode，然后执行state，然后更新state 。好了，自render()更新后，它又会再次呼叫begin。

Reactjs中无法访问“this.state”或方法

1 个答案: