react不能给组件绑定点击事件吗?

这是我的点击事件:

useCoupon=()=>{
    console.log(444444)
};

这是我的DOM结构:

<div className="select-wrapper-inner">
  {
    this.state.availableCouponList.map((item,index)=>{
      return (
                 <SingleCoupon key={index} onClick={this.useCoupon} price={item.price} condition={item.condition} deadline={item.deadline}/>
             )
    })
   }
</div>

我现在绑定的这个点击事件不会被触发,什么意思?SingleCoupon是我自定义的一个组件

阅读 19.8k
6 个回答

SingleCoupon是你定义的组件,并不是一个真实的DOM元素,它不存在点击事件,因为它不是最终渲染的页面的元素。

你应该这样用

class SingleCoupon extends Component {
    render() {
        return (
            <div onClick={this.props.onClick}/>
        )
    }
}

所有的事件处理函数都必须要绑定到真实的DOM上。传给组件,组件只会认为它是个prop

 var _this = this;  
<div className="select-wrapper-inner">
  {
    this.state.availableCouponList.map((item,index)=>{
      return (
                 <SingleCoupon key={index} onClick={_this.useCoupon} price={item.price} condition={item.condition} deadline={item.deadline}/>
             )
    })
   }
</div>

map下面的this指针指向的是map当前遍历的对象,所以应该在外部定义在引入进去

试着这样写:onClick={()=>{this.useCoupon()}

组件怎么能加点击事件?你只能加自定义属性函数,,在dom标签上点击事件回调这个自定义属性函数

试试 onClick={this.useCoupon.bind(this)}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题