一、需求
在子组件执行某个操作的时候,需要其调用父组件的某个函数或者改变父组件的某个参数。实现方式如下:
二、子组件
import PropTypes from 'prop-types';
export default class Child extends PureComponent {
static propTypes = {
onItemClick: PropTypes.func,
}
info = '子组件的内容';
itemClick(info) {
// 可以将子组件中的某个内容传出给父组件
if (this.props.onItemClick) {
this.props.onItemClick(info);
}
}
render(){
return(
<TouchableOpacity
onPress={() => { this.itemClick(this.info); }}
style={styles.touchItem}
>
<Text >
点击修改父组件内容
</Text>
</TouchableOpacity>
);
}
}
三、父组件
export default class Father extends PureComponent {
_onItemClick(info) {
console.log('你调用了父组件的方法')
// 显示info或者用子组件传参改变父组件中的参数
console.log(info);
}
render(){
return(
// _onItemClick为父组件函数定义
<Child
onItemClick={this._onItemClick}/>
);
}