reactjs - 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

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

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

然后，在 SelectListItem 的 render() 函数中，像这样使用:

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