反应中无法将函数传递给子组件？

Question

我不知道为什么但是我不能为我想要传递给我的子组件的父项的函数设置onClick函数.这是来自父母的代码:

_renderChatFriend() {
    return([...this.state.friendsNames].map( friend => {
      return (<ChatFriendPopUp 
          onChatFriendPopUpClick={this.popUpMessage} 
          key={friend.id} 
          name={friend.name} 
        />)
    }))
  }

和子组件上的代码:

class ChatFriendPopUp extends Component {
  popUpMessage(name) {
    console.log("name clicked ",name)
  }
  render() {
    return (
        <li  onClick={this.props.onChatFriendPopUpClick(this.props.name)}>{this.props.name}</li>
    )
  }
}

mount上调用onClick？当我点击它没有被调用？但是我可以通过onClick调用它,如果我没有传递参数.像这样的代码,但我不能参考:

<li  onClick={this.props.onChatFriendPopUpClick}> // not passing argument works?

Answer 1

您必须将其添加为回调函数,否则将立即调用它.把它改成这个

 <li onClick={() => this.props.onChatFriendPopUpClick(this.props.name)}>{this.props.name}</li>