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触发父组件自定义事件