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 (
<p>
<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)}
/>
</p>
);
};
}
这是我最先想到的思路，显然，这个代码冗余实在是太大，后来发现，其实我可以传递一个函数就可以搞定所有的参数修改函数了：
//修改根组件的状态
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 (
<p>
<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)}
/>
</p>
);
};
}
代码瞬间少了很多，世界顿时美好了起来！
