ReactNative 子组件调用父组件中的函数
2017-07-19 本文已影响0人
比wing飛
需求
在子组件执行某个操作的时候,需要其去调用父组件中的某个函数或者改变父组件中的某个参数。
子组件
export default class Child extends PureComponent {
static propTypes = {
onItemClick: React.PropTypes.func,
}
info = '子组件的内容';
itemClick(index) {
// 可以将子组件中的某个内容传出给父组件
if (this.props.onItemClick) {
this.props.onItemClick(index);
}
}
render(){
return(
<TouchableOpacity
onPress={() => { this.itemClick(this.index); }}
style={styles.touchItem}
>
<Text >
点击修改父组件内容
</Text>
</TouchableOpacity>
);
}
}
父组件
export default class Father extends PureComponent {
_onItemClick(info) {
// 显示index或者用子组件的参数改变父组件中的参数
console.log(info);
}
render(){
return(
<Child
onItemClick={this._onItemClick}
);
}
/>