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

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