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中的点击处理程序方法会在页面加载后执行，甚至不会单击该行。当我点击该行时，没有任何反应。

我坚持处理点击事件的方式和位置，以便隐藏表格并显示行的详细信息。我还应该实现关闭/返回按钮来显示表格并隐藏细节。

到目前为止，我所做的是在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解决了这个问题。

从无状态组件执行状态方法

2 个答案: