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}
      );
}
/>
上一篇下一篇

猜你喜欢

热点阅读