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>

        );
    };
}

代碼瞬間少了很多，世界頓時美好了起來！