onClick不适用于自定义组件

Question

为什么onClick不能直接作用于我的自定义元素，如下所示？该函数selectedResource不会被调用。

return (
    <div>
        {
            resources.map(resource => {
                return (
                    <SelectListItem key={resource.id} onClick={this.chosenResource.bind(this)} resource={resource}  />
                )
            })
        }
    </div>
)

但是，如果我将自定义元素封装在div元素中，并在div元素上设置了onClick，那么它将起作用。

return (
    <div>
        {
            resources.map(resource => {
                return (
                    <div key={resource.id} onClick={this.chosenResource.bind(this)}>
                        <SelectListItem  resource={resource}  />
                    </div>
                )
            })
        }
    </div>
)

第一种方法有什么问题？

Answer 1

您onClick只能在DOM元素上提供和其他事件。

Answer 2

@nrgwsth是正确的，如果您仍然想坚持第一种方法，则可以使用：

return (
    <div>
        {
            resources.map(resource => {
                return (
                    <SelectListItem key={resource.id} customClickEvent={this.chosenResource.bind(this)} resource={resource}  />
                )
            })
        }
    </div>
)

然后，在您的SelectListItem's render()函数中使用如下代码：

return (
    <div onClick={this.props.customClickEvent}>
        ...
    </div>
)

Answer 3

在反应中，我们有组件（例如SelectListItem）和元素（例如div）。元素是组件的基本构建块。

元件transpiled成表示DOM元素在这里我们可以结合DOM事件等纯javascript对象onCLick，onHover等等。

但是 Component 返回包含一堆元素但不对应于 DOM 元素的实例。

所以如果你想绑定 DOM 事件，我们应该在 react 元素上进行，而不是在组件中。

在上面的代码中，onClick 事件作为 props 传递给组件，可以通过记录组件的 props 来看到它。