React子组件修改父组件的状态
发布时间:2020-12-15 08:24:05 所属栏目:百科 来源:网络整理
导读:React子组件修改父组件的状态 在React中,父子组件间的通信是通过props来传递参数的。一般情况下,父组件传一个值给子组件,同时还要传一个修改该值的方法函数。这样,在子组件中调用这个方法函数才能修改该值,并再次传给子组件,从而修改子组件状态。 虽然
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> ); }; }
代码瞬间少了很多,世界顿时美好了起来! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- c# – 格式化货币总是使用美元,无论用户文化如何
- Flex的DataGrid中设置单元格跳转。
- react-native – 在ScrollView for React Native中检测缩放
- ruby-on-rails – 用于在字符串数组中对字符串进行分组的Ru
- c – AVX:数据对齐:存储崩溃,storeu,load,loadu没有
- ajax实例---post方式
- cocos2d-iphone – 使用cocos2d游戏的状态设计模式
- Oracle导入sql文件数据,中文乱码问题解决方案
- Flex ActionScript 3.0 SharedObject 用于在用户计算机或服
- Flex, Array, ArrayList, ArrayCollection difference