未在子组件中触发点击事件[重复]

Question

这个问题已经在这里有了答案：

• 应用className / onClick / onChange不适用于Custom React Component 2答案

我正在学习React，我有3个组成部分：

• App ，包含UserList
• UserList ，包含卡片列表
• UserCard ，上一个组件的内容

这是我的UserList代码：

 state = {
    users: [
      { id: 1, name: 'Chris', age: 20 },
      { id: 2, name: 'Max', age: 1 },
      { id: 3, name: 'Jean', age: 23 },
      { id: 4, name: 'Luc', age: 30 }
    ]
  }

  userList = this.state.users.map(user => {
    return (
    <div key={user.id} className="column">
      <UserCard name={user.name} age={user.age} onClick={this.userClickHandler} />
    </div>);
  });

  userClickHandler = () => {
    console.log('clicked !');
  };

  render() {
    return (
    <div className="columns">
      {this.userList}
    </div>);
  }

出于某些奇怪的原因，单击UserCard时不会触发我的userClickHandler 。

请注意，我已经尝试了以下方法：

将onClick={this.userClickHandler}更改为onClick= () => {this.userClickHandler} ，当我在render方法中移动userList的代码而不将其分配给变量时，它就可以工作：

<div className="columns">     
  { this.state.users.map(user => {
    return (
    <div key={user.id} className="column" onClick={this.userClickHandler}>
      <UserCard name={user.name} age={user.age} />
    </div>);
  }) }
</div>);

有什么明显的问题？

Answer 1

您需要在此处将函数绑定到范围。.很抱歉我以前的回答。 我没有正确分析

<div key={user.id} className="column" onClick={this.userClickHandler.bind(this)}>

Answer 2

通常，我会将这样的东西存储在这样的render部分的变量中。 让我知道是否有帮助。 ：

      render() {

      let userList = this.state.users.map(user => {
        return (
        <div key={user.id} className="column">
          <UserCard name={user.name} age={user.age} onClick={this.userClickHandler} />
        </div>);
      });
        return (
        <div className="columns">
          {userList}
        </div>);
      }

另外，在userList的构造函数中，绑定单击处理程序：

constructor(){
  this.userClickHandler = this.userClickHandler.bind(this);
}

Answer 3

这可能是因为您发现了功能提升。
箭头功能未提升。

声明后，只能使其调用它。

可以在声明之前在行号处调用使用function关键字的普通函数。

https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting