無法在子組件中傳遞功能給子組件？

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

掛載時會調用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>