美文网首页
react native 子组件传值给父组件

react native 子组件传值给父组件

作者: HappyErica | 来源:发表于2017-06-28 15:12 被阅读0次

    简单粗暴上代码

    父组件

    import React, { Component } from 'react';
    import {
        Text,
        View,
    } from 'react-native';
    import Item from './Item'
    
    export default class Test extends Component {
        constructor(props) {
            super(props)
            this.state = {
                mark:'初始值'
            }
        }
    
        fn(val){
            this.setState({
                mark:val
            });
        }
    
        render() {
            return (
                <View>
                    <Item fn={this.fn.bind(this)}/>
                    <Text>{this.state.mark}</Text>
                </View>
            )
        }
    }
    

    子组件

    import React, { Component } from 'react'
    import {
        Text,
        View,
        StatusBar
    } from 'react-native';
    
    export default class Item extends Component {
        render() {
            return (
                <View>
                    <Text onPress={()=>{
                        this.props.fn('子组件的值')
                    }}>点击</Text>
                </View>
            )
        }
    }
    

    如果没有加bind(this)会报错-this.setState is not a function

    相关文章

      网友评论

          本文标题:react native 子组件传值给父组件

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