首页 > React-native 点击子组件tab项 向父组件传status值?

React-native 点击子组件tab项 向父组件传status值?

React-native 点击子组件tab项 向父组件传status值,进而重新获得当前点击的status渲染该激活显示的子tab项

父组件:
class Father extends Component {

    constructor(props) {
        super(props);
        this.state = {
            status: 0
        };
    }

    _callback(statusId) {
        {/*

        this.setState({
                    status: statusId,
                });

    */}
        
        alert("父组件接收到的值为: " + statusId); *//这里能获取到子组件点击的status值,但一旦上面父组件加上this.setState便会报错,提示undefined is not function  (evaluating 'this.this.setState({
                    status: statusId,
                });')*
    }

    render() {
        return (

        <Child status={this.state.status}  callback={this._callback} />

    )



    }

}
     


子组件:

class Child extends Component {

    constructor(props) {
        super(props);
        this.state = {
            status: this.props.status,
        };
    }

    _press(statusId) {
        this.props.callback(statusId);
    }

    render() {
        return (


            //省略代码
                <TouchableHighlight
                                    onPress={this._press(this, 1)}
                                >
                                    <View>
                                        <View style={[styles.tab]}></View>
                                        <Text style={[styles.text]}>状态1</Text>
                                    </View>
                                </TouchableHighlight>

                <TouchableHighlight
                                    onPress={this._press(this, 2)}
                                >
                                    <View>
                                        <View style={[styles.tab]}></View>
                                        <Text style={[styles.text]}>状态2</Text>
                                    </View>
                                </TouchableHighlight>

            //省略代码

    )



    }

}
     

上下文this不对了,改改:

父组件:
class Father extends Component {

    constructor(props) {
        super(props);
        this.state = {
            status: 0
        };
    }

    _callback(statusId) {
  
        this.setState({
                    status: statusId,
                });

    }

    render() {
        return (<Child status={this.state.status}  callback={this._callback.bind(this)} />);
    }
}   

补充:

通过官网文档,你就能看出来。ES6类语法格式书写的组件,必须手动bind上下文,才能获取正确的this

【热门文章】
【热门文章】