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

Question

这是我的点击事件：

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是我自定义的一个组件

Answer 1

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

你应该这样用

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

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

Answer 2

 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当前遍历的对象，所以应该在外部定义在引入进去

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

我也遇到了这个问题，用的antd-mobile库，给标签绑定onclick事件一直无效，求助。mac系统，用同事window系统偶尔能点击