無法將函數傳遞給子組件？

我不知道爲什麼，但我不能爲我想要傳遞給我的子組件的父級函數設置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謝謝。錯過了約束。真棒 –

無法將函數傳遞給子組件？

回答

相關問題