React在子組件中傳遞帶箭頭功能的參數

我有這些父子組件，我想通過點擊功能選擇子組件中的一個項目。然而，似乎子組件中的函數會自動調用，而不是等到用戶單擊該元素爲止。爲了更清楚這是我的父母和孩子組成部分React在子組件中傳遞帶箭頭功能的參數

export class ParentView extends Component { 
    state = { 
    selectedItem: {} 
    } 

    handleClick = (item) => { 
    alert('you click me'); 
    this.setState({selectedItem: item}); 
    } 

    render() { 
    let item = { name: 'Item-1' }; 
    return (
     <div> 
     <ChildItem item={item} handleClick={this.handleClick} /> 
     </div> 
    ); 
    } 
} 

export class ChildItem extends Component { 
    render() { 
    const {item, handleClick} = this.props; 
    return (
     <div> 
     <a onClick={handleClick(item)} /> 
     </div> 
    ); 
    } 
}

這些都是使用箭頭函數傳遞到子組件我成分，但始終警惕被稱爲起初渲染而不被用戶觸發。任何建議？

來源

2016-08-30 Dion Dirza

您應該將函數本身傳遞給onClick。

如果你想用參數去調用它，你必須選擇：

將其綁定與項目下
通新箭頭功能一樣() => handleClick(item)

一個例子：

export class ChildItem extends Component { 
    render() { 
    const {item, handleClick} = this.props; 
    return <div> 
     <a onClick={handleClick.bind(this, item} /> 
    </div> 
    } 
}

在您的代碼中，您正在調用中的函數聲明。

<a onClick={handleClick(item)} />

來源

2016-08-30 12:02:24 havenchyk

謝謝，我解決了'onClick = {（）=> handleClick（item）}' –

的ES6方式：

使用箭頭功能=>

onClick={() => handleClick(item)}

（@ havenchyk的答案是ES5瓦特AY）。

來源

2017-11-25 15:24:32 Snowman

React在子組件中傳遞帶箭頭功能的參數

回答

相關問題