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

我不知道为什么，但我不能为我想要传递给我的子组件的父级函数设置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?

来源

2017-08-09 i am gpbaculio

您打电话给它 - 不确定您的期望。你真的在问如何使用它，但传递一个参数？ –

[Reactjs Audio button？]可能重复（https://stackoverflow.com/questions/43359992/reactjs-audio-button） –

你必须添加它作为回调函数，否则它会立即被调用。将其更改为此

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

来源

2017-08-09 14:43:15

你有一些链接，所以我可以阅读更多关于此？它的工作原理，但我觉得缺少一些东西 –

@iamnewbie React教程是一个不错的开始，但那是一个JavaScript特定的。 https://facebook.github.io/react/docs/handling-events.html –

aha谢谢。错过了约束。真棒 –

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

回答

相关问题