Javascript 这个范围在一个简单的React组件中

我认为，当涉及到这个问题时，范围有问题。请在我的过滤器组件中单击

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

获取错误“未定义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>
    )
}});

var Filter=React.createClass({
getDefaultProps（）{
返回{
过滤器列表：[]，
名称：“”
};
},
McClick（事件）{
event.currentTarget.style.backgroundColor='#f00'；
},
render（）{
返回(
{this.props.name}

{this.props.filterList.map（函数（listValue））{
返回
{listValue}
；
})}

)
}});

您可以在此处使用bind

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

var Filter=React.createClass({
getDefaultProps（）{
返回{
过滤器列表：[]，
名称：“”
};
},
McClick（事件）{
event.currentTarget.style.backgroundColor='#f00'；
},
render（）{
返回(
{this.props.name}

{this.props.filterList.map（函数（listValue））{
返回
{listValue}
；
}.bind（this））}

)
}});

您应该为回调设置

此

，因为现在

此

指的是全局范围（在浏览器中它是

窗口

，或者

未定义

（如果您使用）

this.props.filterList.map（函数（listValue）{
返回
{listValue}
；
}，这个）；
^^^^^

您应该将此绑定到匿名函数

试试这个：

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

{this.props.filterList.map（函数（listValue））{
返回
{listValue}
；
}.bind（this））}

或使用箭头功能（自动执行作业）：

{this.props.filterList.map（（listValue）=>{
返回
{listValue}
；
}
)}

如果您使用的是

babel

，则可以使用

箭头功能

：

var Filter=React.createClass({
getDefaultProps（）{
返回{
过滤器列表：[]，
名称：“”
};
},
McClick（事件）{
event.currentTarget.style.backgroundColor='#f00'；
},
render（）{
返回(
{this.props.name}

{this.props.filterList.map（（listValue）=>
{listValue}
)}

);
}
});

您不需要使用

.bind

，因为您可以通过第二个参数设置

此

——您不需要使用

.bind

，因为您可以通过第二个参数设置

此

-

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