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>
);
};
}
代码瞬间少了很多,世界顿时美好了起来!