Question

我认为，在我的过滤器组件中有关于this.onItemClick的范围。

获取错误“onItemClick未定义”。

这是Filter组件的代码。

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

您应该为.map回调设置this，因为现在this指的是全局范围（在浏览器中为window，如果您使用，则为undefined strict mode）

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

Answer 2

你可以在这里使用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>
    )
}});

Answer 3

你应该将this绑定到你的匿名函数。

试试这个：

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

或使用箭头功能（自动完成工作）：

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

Answer 4

如果您使用arrow functions，则可以使用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> ); } });：

VACUUM FREEZE

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

4 个答案: