Question

我正在学习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>);
  }

由于某些奇怪的原因，点击userClickHandler时我的UserCard不会被触发。

请注意，我尝试过以下操作：

将onClick={this.userClickHandler}更改为onClick= () => {this.userClickHandler}，并且当我在渲染方法中移动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() {

      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的构造函数中，绑定click处理程序：

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

Answer 3

这很可能是因为您发现了悬挂功能箭头功能未被吊起。

您只能在声明后才能调用它。

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

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

单击事件不会在子组件中触发

3 个答案: