從無狀態組件執行狀態方法

我有一個頁面組件讓我們說HomePage。我有兩個無狀態組件List和ListRow。這個想法是用項目列表來顯示錶格，當用戶點擊任何特定的行時，隱藏表格並顯示該特定行的細節。從無狀態組件執行狀態方法

我 HomePage渲染方法

所以：

<List data={listOfData} onClick={this.clickHanlder} />

的HomePage單擊處理方法：

clickHandler(name) { 
    console.log(name); 
}

在我List無狀態組件我這樣做：

const List = ({data, onClick}) => { 
    return (
    <table> 
     <thead> 
     <tr> 
      <td>Name</td> 
     </tr> 
     </thead> 
     <tbody> 
     {data.map(el => 
      <ListRow key={el.id} item={el} onClick={onClick} /> 
     )} 
     </tbody> 
    </table> 
); 
}

而且在我的ListRow stat eless組件我這樣做：在HomePage

const ListRow = ({item, onClick}) => { 
    return (
    <tr> 
     <td><a href="#" onClick={onClick(el.name)}>{el.name}</a></td> 
    </tr> 
); 
}

單擊處理方法執行一次頁面加載，甚至沒有點擊行。當我點擊該行時，沒有任何反應。

我被困在如何以及在哪裏處理單擊事件，以便隱藏表格並顯示該行的詳細信息。我也應該實現關閉/後退按鈕來顯示錶格並隱藏細節。

我到目前爲止所做的是在HomePage中實現click事件方法，該方法將更新其狀態並將該方法傳遞給ListRow無狀態組件。但是，當我加載應用程序本身，點擊事件得到執行。我不知道如何正確處理這個問題。

來源

2016-11-14 Vimalraj Selvam

點擊事件在哪裏？ –

@IlanHasanov：那是我在哪裏實施困惑。我嘗試在'HomePage'中實現click事件方法，並將這些道具傳遞給'List'，然後'List'傳遞給'ListRow'。但它不起作用。 –

我找到了解決辦法最後。我做錯了。我已經改變了clickHandler到如下：

clickHandler(event) { 
    console.log(event.target.innerHTML); 
}

，並在我的ListRow無狀態組件，我這樣做：

const ListRow = ({item, onClick}) => { 
    return (
    <tr> 
     <td><a href="#" onClick={onClick}>{el.name}</a></td> 
    </tr> 
); 
}

我在做錯誤是，我試圖通過值的onClick事件似乎不起作用。所以使用innerHTML解決了這個問題。

來源

2016-11-14 12:22:51

這是地道的反應器容器組件將處理（例如）點擊事件，人口等，所以你的情況，你可以創建行/項單擊列表分量的處理器，並通過參考到那個降到ListRow組件作爲其道具之一。

即使它是無狀態的，您的列表組件仍然可以聲明一個函數來處理點擊;看這篇文章的頂部顯示的例子：

https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.9sxosb40u

但是你不能使用任何的陣營生命週期方法或狀態。如果你想利用這些，你需要把它包起來，如下所示：

https://egghead.io/lessons/javascript-redux-fetching-data-on-route-change

來源

2016-11-14 11:16:40

如果我在'List'組件中實現點擊，我如何更新'HomePage'的狀態？ –

您可以在HomePage組件中聲明單擊處理程序，這意味着它通過道具級聯到列表，然後到ListRow。如果這看起來不實際考慮使用redux來管理全局應用程序狀態。 –

更新了我如何使用點擊處理程序的問題。我完全按照你的建議進行，但那不起作用。 –

從無狀態組件執行狀態方法

回答

相關問題