react父级捕获事件实现子元素切换状态

一到周末感觉时间不够用了,上午起床出去办点事情,回到家就中午了,吃个饭刷刷手机休息一下,就到3,4点钟了。写几行代码然后就到吃完饭时间了。吃完出去逛一圈消消食,回家就7,8点钟了。洗洗上床又刷刷手机,就的9,10点钟了,所以你看,时间就这样溜走了。以前念书的时候总觉得时间很多,现在一天也是24小时,却觉得时间过得好快。
好了,还是说下今天更新的代码,今天主要更新了个自定义tab,代码如下:

<View className="index-tab" onClick={(e) => this.shiftTab(e)}>
  <View data-value="0" 
  	className={this.state.tabState === "0" ? "action" : ""}>
    招股中
  </View>
  <View data-value="1"
        className={this.state.tabState === "1" ? "action" : ""}>
    待上市
  </View>
  <View data-value="2"
        className={this.state.tabState === "2" ? "action" : ""}>
    已上市
  </View>
</View>

本想通过shiftTab实现切换className样式,但是不熟悉react的捕获事件,所以暂且获取data-value后再做下一步打算:

shiftTab(e) {
  console.log("clicktab", e, e.nativeEvent, e.target.dataset.value);
  this.setState({
    tabState: e.target.dataset.value,
  });
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值