[英]React onClick event on component
我有一个名为<SensorList />
的 React 组件,它有许多子<SensorItem />
s(另一个 React 组件)。 我希望能够申报onClick
每个事件的<SensorItem />
从内<SensorList />
我尝试执行以下操作:
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
事件,上面的函数体应该是这样。
因此,我得出的结论是,我无法在实际的<SensorItem />
标签上注册onClick
事件(但是,我不确定为什么会这样)。 否则我如何实现这一目标?
这取决于您的 SensorItem 组件的定义。 因为 SensorItem 不是本机 DOM 元素,但正如您所说,另一个 React 组件,这里定义的onClick只是该组件的一个属性。 您需要做的是,在 SensorItem 组件内部将 onClick 属性传递给 DOM 组件的 onClick 事件:
var SensorItem = React.createClass({
render: function() {
return (
<div className="SensorItem" onClick={this.props.onClick}>
...
</div>
);
}
});
正如在另一个答案中所解释的,问题在于<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={...} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.