react 子级组件更改父级组件状态

2019独角兽企业重金招聘Python工程师标准>>>

使用react时,如果我们将层级划分的很清楚,那么就会经常出现子级组件更改父级组件状态的情况,而这种情况并不能单单由redux来解决,那么要怎么样方便快捷的实现这种需求呢?

其实说来也很容易,

简单地说就是在父级元素调用子级元素时,将子级需要改变父级的状态包装成一个函数,带入到子级元素中,再由子级来调用...

看上去可能有点绕,我们来看一个简单的列子

import React, { Component } from 'react';

export default class Super extends Component {

    constructor(props) {
        super(props);
        this.state = {
            open: false
        }
    }

    handleOpen () {
        this.setState({open: true})
    }

    handleClose () {
        this.setState({open: false})
    }

    render() {

        var show = this.state.open ? {display: 'block'} : {display: 'none'};

        return (
            <div>
                <div style={show}>
                    看得见吗?
                </div>
            </div>
        )
    }
}

这是一个父级元素,我们可以通过更改state的值来显示文字,

那么当我们需要通过子级来更改这个状态的时候就可以这样

import React, { Component } from 'react';

// 父级元素
export default class Super extends Component {

    constructor(props) {
        super(props);
        this.state = {
            open: false
        }
    }

    handleOpen () {
        this.setState({open: true})
    }

    handleClose () {
        this.setState({open: false})
    }

    render() {

        var show = this.state.open ? {display: 'block'} : {display: 'none'};

        return (
            <div>
                <div style={show}>
                    看得见吗?
                </div>
                <Suber
                    show={this.handleOpen()}
                    hidden={this.handleClose()}
                    />
            </div>
        )
    }
}

// 子级元素
class Suber extends Component {
    constructor(props) {
        super(props)
    }

    /* 接收父级带入的方法供给子级使用 */
    openState () {
        this.props.show()
    }
    
    closeState () {
        this.props.hidden()
    }

    render() {
        return (
            <div>
                <button onClick={this.openState.bind()}>开</button>
                <button onClick={this.closeState.bind()}>关</button>
            </div>
        )
    }
}

将父级的改变状态包装成两个function,然后传递给子级,这样子级元素就可通过父级传给它的方法来调用更改父级的状态啦

看上去很复杂,其实实现起来还是很简单的,嘿嘿...

转载于:https://my.oschina.net/codingBingo/blog/880810