"this.state"またはメソッドがReactjsにアクセスできない

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

}

私はこのライブラリを使用しました：thisはES6クラスのnot automatically boundあるのでhttps://pqx.github.io/react-ui-tree/

Answer 1

はあなたのrenderNode関数にthisをバインドする必要があります。それ以外の場合は、関数内に適切なコンテキストがありません。これがあなたのthis.state.actionが定義されていない理由と、それがthis.onClickNodeを解決できない理由です。

あなたのコンストラクタで

、あなたのonClickハンドラ内のノードを使用する場合、あなたは私が何が起こっているが、ということであると仮定してい

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

にそれを切り替えることができ、また

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

を追加this.renderNodeはrender()が呼び出されたときに実行され、this.onClickNodeを実行してからstateを更新します。さて、stateが更新されてから、render()に再度電話します。