Question

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

SELECT
    prod.*,
    details.specification,
    details.warrantyinfo
FROM
    Products prod 
INNER JOIN  ProductDetails  details 
    ON details.product_id = prod.id 
WHERE 
    prod.is_approved = '1' 
    AND prod.is_active = '1'
    AND prod.is_deleted = '0' 
    ORDER BY  
        prod.created_at > '2017-08-14' DESC,  
        IF(prod.created_at > '2017-08-14', prod.created_at, FIELD(prod.listing_type,2,3,4,5,6))  DESC,  
        prod.is_featured DESC, prod.updated_at DESC 
LIMIT 0, 20

但是，如果我将自定义元素封装在div元素中并且在div元素上使用onClick，那么它就可以工作。

listing_type

第一种方法有什么问题？

Answer 1

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

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）。元素是组件的基本构建块。

元素被转换为普通的javascript对象，这些对象代表DOM元素，我们可以绑定dom事件，如onCLick，onHover等。

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

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

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

onClick不适用于自定义组件

3 个答案: