react子组件触发父组件事件

父组件:

  // 标题点击事件 从子组件传递过来
  handleTabsItemChange(index) {
    // 1 获取被点击的标题索引
    const index = index;
    // 2 修改源数组
    let {tabs} = this.state;
    tabs.map((v, i) => i === index ? v.isActive = true : v.isActive = false);
    // 3 赋值到data中
    this.setState({
      tabs
    })
  }
  
  {/*监听自定义事件*/}
  <Tabs tabs={tabs} onTabsItemChange={this.handleTabsItemChange.bind(this)}>

父组件一定要绑定this，否则this.state为undefined

子组件:

class Tabs extends Component {
  // 点击事件
  handleItemTap(e){
    // 1 获取点击的索引
    const {index}=e.currentTarget.dataset;
    // 2 触发 父组件中的事件 自定义\
    // console.log(this.props)
    this.props.onTabsItemChange(index);
  }

  render() {
   let {tabs} = this.props
    return (
      <View class='tabs'>
        <View class='tabs_title'>
          {
            tabs.map((item,index)=>(
              <View
                key={item.id}
                class={item.isActive?'title_item active':'title_item'}
                onTap={this.handleItemTap}
                data-index={index}
              >
                {item.value}
              </View>
            ))
          }
        </View>
      </View>
    );
  }
}

export default Tabs;

子组件使用this,props触发父组件自定义事件