前端 - react组件绑定事件无法触发

问题描述

问 题

问题

自己写了一个组件SortNavItem,然后在SortNav组件里引用该组件，并绑定onClick事件，无法触发。
如果将onClick事件在SortNavItem里面的元素上，则可以触发！

代码

<SortNavItem>
<SortNav>

疑问

事件不能绑定在引入的组件上，只能绑定在元素上？但是我参考的<Tabbar>的写法是能正常触发的！

解决方案

react/weui TabBarItem源码，请看...others，这里面包含了onClick，最终还是被加到了元素上，所以组件里的任何属性都是用于传递都props，并不能绑定事件

render() {

        const {children, className, active, icon, label, ...others} = this.props;
        const cls = classNames({
            'weui-tabbar__item': true,
            'weui-bar__item_on': active
        }, className);

        if (icon || label){
            return (
                <div className={cls} {...others}>
                    {icon ? <TabBarIcon>{icon}</TabBarIcon> : false}
                    {label ? <TabBarLabel>{label}</TabBarLabel> : false}
                </div>
            );
        } else {
            return (
                <div className={cls} {...others}>
                    {children}
                </div>
            );
        }
    }

这篇关于前端 - react组件绑定事件无法触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！