React子组件修改父组件的状态

React子组件修改父组件的状态

在React中，父子组件间的通信是通过props来传递参数的。一般情况下，父组件传一个值给子组件，同时还要传一个修改该值的方法函数。这样，在子组件中调用这个方法函数才能修改该值，并再次传给子组件，从而修改子组件状态。
虽然这个数据流非常绕，至少是能接受的，但一旦要传非常多的参数给子组件的时候，这样就很麻烦，比如要传十个参数，就必须再传十个修改函数，而且这十个修改函数还必须在父组件中写一遍定义，结果就如下一般繁琐：

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            step: 1,
            isHome: '',
            isNewCar: false,
            plateNo: '',
            name: '',
            idCard: '',
            brandModel: '',
            engineNo: '',
            vin: '',
            hasRecord: 0,
            registerDate: ''
        };
    };

    //修改参数的函数
    setStep() {
        this.setState({
                step: ++this.state.step
            });
    }

    //修改参数的函数
    setIsHome(val) {
        this.setState({
                isHome: val
            });
    }

.
.
.
.
.
.


    //修改参数的函数
    setRegisterDate(val) {
        this.setState({
                registerDate: val
            });
    }

    render() {
        return (
            <div>
                <IndexDesk 
                    step={this.state.step} 
                    isHome={this.state.isHome} 
                    isNewCar= {this.state.isNewCar}
                    plateNo={this.state.plateNo} 
                    idCard={this.state.idCard}
                    brandModel={this.state.brandModel}
                    engineNo={this.state.engineNo}
                    vin={this.state.vin}
                    hasRecord={this.state.hasRecord}
                    registerDate={this.state.registerDate}

                    setStep={this.setStep.bind(this)}
                    setIsHome={this.setIsHome.bind(this)}
                    .
                    .
                    .
                    setRegisterDate={this.setRegisterDate.bind(this)}

                    />
            </div>

        );
    };
}

这是我最先想到的思路，显然，这个代码冗余实在是太大，后来发现，其实我可以传递一个函数就可以搞定所有的参数修改函数了：

//修改根组件的状态
    setSet(obj) {
        this.setState(obj);
    }

之前的组件可以写成如下模样

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            step: 1,
            isHome: '',
            isNewCar: false,
            plateNo: '',
            name: '',
            idCard: '',
            brandModel: '',
            engineNo: '',
            vin: '',
            hasRecord: 0,
            registerDate: ''
        };
    };

//修改根组件的状态
    setSet(obj) {
        this.setState(obj);
    }


    render() {
        return (
            <div>
                <IndexDesk 
                    step={this.state.step} 
                    isHome={this.state.isHome} 
                    isNewCar= {this.state.isNewCar}
                    plateNo={this.state.plateNo} 
                    idCard={this.state.idCard}
                    brandModel={this.state.brandModel}
                    engineNo={this.state.engineNo}
                    vin={this.state.vin}
                    hasRecord={this.state.hasRecord}
                    registerDate={this.state.registerDate}

                    setSet={this.setSst.bind(this)}
                    />
            </div>

        );
    };
}

代码瞬间少了很多，世界顿时美好了起来！