react：尝试将 onClick 添加到 li 标记，但单击处理程序函数未定义

IT技术 reactjs
2021-04-22 06:36:41

我是新手，所以我对此了解不多。我正在尝试向 li 添加一个点击处理程序，但该函数似乎未定义？

var ActivityList = React.createClass({
  getInitialState: function() {
    return {name:"test"};
  },
  handleClick:function(e){
    console.log(e.target.name);
  },
  render:function(){
    return (
      <ul>
        {this.props.data.map(function(game){
         return <li onClick={this.handleClick} name={game.name}>{game.name}</li>;
        })
      }
      </ul>);
  }
});

我想知道是不是因为我的范围界定错误？

2个回答

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

this.props.data.map(function(game) {
  return <li onClick={this.handleClick} name={game.name}>{game.name}</li>;
}, this);
  ^^^^^

Example

非常感谢，救命的:)
2021-06-05 06:36:41

您还可以使用箭头函数来完全避免this在函数中绑定：

this.props.data.map(game =>
    <li onClick={this.handleClick} name={game.name}>{game.name}</li>
)
其它你可能感兴趣的问题
上一篇在嵌套的功能组件 React Native 中键入 TextInput 时键盘关闭 下一篇使用Promise时，react警告无法设置状态