反应:尝试将 onClick 添加到 li 标记，但单击处理程序函数未定义 [英] React: trying to add an onClick to a li tag but the click handler function is undefined

问题描述

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

I am new to react, so I don't know much about it. I am trying to add a click handler to a li but the function seems to be undefined?

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

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

I am wondering if it is because i have my scoping wrong here?

推荐答案

将 this 设置为 .map，因为在 .map 回调 this 指的是全局范围(在浏览器中如果您使用 严格模式)

Set this to .map, because in .map callback this refers to global scope(in browser it is window or undefined if you use strict mode)

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

示例

这篇关于反应:尝试将 onClick 添加到 li 标记，但单击处理程序函数未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！