単純なReactコンポーネントのこのスコープ

Question

Filterコンポーネントのthis.onItemClickについては、スコープに問題があります。

"onItemClickが定義されていません"というエラーが発生しました。

ここに、フィルタコンポーネントのコードを示します。

var Filter = React.createClass({ 
getDefaultProps() { 
    return { 
     filterList: [], 
     name: '' 
    }; 
}, 
onItemClick(event) { 
    event.currentTarget.style.backgroundColor = '#f00'; 
}, 
render() { 
    return (
     <div className="filterCloud quarter-section"> 
      <h3>{this.props.name}</h3> 
      <ul> 
       {this.props.filterList.map(function(listValue) { 
        return <li onClick={this.onItemClick}>{listValue}</li>; 
       })} 
       </ul> 
     </div> 
    ) 
}}); 

Answer 1

をバインドを使用することができます（あなたがstrict modeを使用する場合、ブラウザでは、window、またはundefinedある）

this.props.filterList.map(function(listValue) { 
    return <li onClick={this.onItemClick}>{listValue}</li>; 
}, this); 
    ^^^^^ 

Answer 2

あなたは今thisがグローバルスコープを参照するので、あなたは、.mapコールバック用thisを設定する必要があり、ここで

var Filter = React.createClass({ 
getDefaultProps() { 
    return { 
     filterList: [], 
     name: '' 
    }; 
}, 
onItemClick(event) { 
    event.currentTarget.style.backgroundColor = '#f00'; 
}, 
render() { 
    return (
     <div className="filterCloud quarter-section"> 
      <h3>{this.props.name}</h3> 
      <ul> 
       {this.props.filterList.map(function(listValue) { 
        return <li onClick={this.onItemClick}>{listValue}</li>; 
       }.bind(this))} 
       </ul> 
     </div> 
    ) 
}}); 

Answer 3

あなたはあなたの前にthisをバインドする必要がありますymous関数です。

この試してみてください：あなたはbabelを使用している場合は、arrow functionsを使用することができます

{this.props.filterList.map((listValue) => { 
     return <li onClick={this.onItemClick}>{listValue}</li>; 
    } 
)} 

Answer 4

：

{this.props.filterList.map(function(listValue) { 
        return <li onClick={this.onItemClick}>{listValue}</li>; 
       }.bind(this))} 

または矢印機能を使用する（自動的にジョブがありません）

var Filter = React.createClass({ 
    getDefaultProps() { 
    return { 
     filterList: [], 
     name: '' 
    }; 
    }, 
    onItemClick(event) { 
    event.currentTarget.style.backgroundColor = '#f00'; 
    }, 
    render() { 
    return (
     <div className="filterCloud quarter-section"> 
     <h3>{this.props.name}</h3> 
     <ul> 
      {this.props.filterList.map((listValue) => 
      <li onClick={this.onItemClick}>{listValue}</li> 
     )} 
     </ul> 
     </div> 
    ); 
    } 
});