组件上的React onClick事件
组件上的React onClick事件
提问于 2015-02-02 06:44:52
我有一个名为<SensorList />的React组件，它有许多子<SensorItem />(另一个React组件)。我希望能够在每个<SensorItem />上从<SensorList />中声明一个onClick事件。我尝试做了以下几件事：
sensorSelected: function(sensor) {
console.log('Clicked!');
},
render: function() {
var nodes = this.state.sensors.map(function(sensor) {
return (
<SensorItem onClick={ this.sensorSelected } />
);
}.bind(this));
return (
<div className="sensor-list">
{ nodes }
</div>
);
}不用说，我没有得到任何“点击！”在我的控制台上。Chrome中的React检查器指示注册了一个onClick事件，上面的函数体应该是这样的。
因此，我得出结论，我不能在实际的onClick标记上注册<SensorItem />事件(但是，我不确定这是为什么)。否则我该如何实现这一点呢？
回答 1
Stack Overflow用户
发布于 2020-08-05 06:03:00
问题
正如在另一个答案中解释的那样，问题是<SensorItem> React组件上的onClick (与<div>或<p>等本地DOM元素相反)被视为组件属性的传递，而不是DOM事件处理程序的传递。而且很可能您的<SensorItem>组件没有声明onClick属性，该属性值只是丢失了。
解决方案
最直接的解决方案是在SensorItem组件上显式添加onClick属性，然后将其传递给该组件的根DOM元素：
function SensorItem({ prop1, prop2, onClick }) {
(...)
return (
<p onClick={onClick}>
(...)
</p>
);
}但对我来说，最好的解决方案通常是使用对象解构表示法对所有未定义组件的属性进行分组，然后将它们全部传递给该组件中的根DOM元素。这样，您就可以传递onClick、onHover、className等，而不需要为每一个定义单独的属性：
function SensorItem({ prop1, prop2, ...rootDOMAttributes }) {
(...)
return (
<p {...rootDOMAttributes}>
(...)
</p>
);
}无论您使用这两种方法中的哪一种，处理程序现在都可以工作，因为它现在将附加到SensorItem的根DOM元素
<SensorItem onClick={...} />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28268835
复制相关文章
相似问题