美文网首页
ReactNative 子组件调用父组件中的函数

ReactNative 子组件调用父组件中的函数

作者: 比wing飛 | 来源:发表于2017-07-19 11:22 被阅读0次

    需求


    在子组件执行某个操作的时候,需要其去调用父组件中的某个函数或者改变父组件中的某个参数。


    子组件


    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}
          );
    }
    />
    

    相关文章

      网友评论

          本文标题:ReactNative 子组件调用父组件中的函数

          本文链接:https://www.haomeiwen.com/subject/hygkkxtx.html