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

我有一个页面组件让我们说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来管理全局应用程序状态。 –

更新了我如何使用点击处理程序的问题。我完全按照你的建议进行，但那不起作用。 –

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

回答

相关问题