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

Question

我有一個頁面組件，比如說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無狀態組件中，我這樣做：

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

HomePage加載后，單擊處理程序方法將在頁面加載后立即執行，甚至無需單擊該行。 當我單擊該行時，沒有任何反應。

我被困在如何以及在何處處理click事件的問題，以便隱藏表格並顯示行的詳細信息。 我還應該實現關閉/返回按鈕來顯示表格並隱藏細節。

到目前為止，我所做的是在HomePage實現click事件方法，該方法將更新其狀態並將該方法向下傳遞到ListRow無狀態組件。 但是，當我加載應用程序本身時，click事件就會執行。 我不確定如何正確處理。

Answer 1

在React中，慣用的是實現將處理（例如）單擊事件，填充等事件的容器組件。因此，在您的情況下，您可以在List組件中為行/項單擊創建處理程序，並將對該引用的引用傳遞給ListRow組件作為其道具之一 。

即使它是無狀態的，您的List組件仍可以聲明一個函數來處理單擊。 查看本文頂部顯示的示例：

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

但是，您不能使用任何React生命周期方法或狀態。 如果要使用這些，則需要如下所示將其包裝起來：

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

Answer 2

我終於找到了解決方案。 我做錯了。 我將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解決了該問題。