我有两个以上的嵌套状态数据要发布,每个嵌套节都有自己的组件来处理它的提交,但是第一节允许一个在其字段中键入,而其余的则不允许。
以下是状态:
this.state = {
firstName: '',
lastName: '',
middleName: '',
nationality: '',
gender: '',
religion: '',
medical_condition: '',
deceased: '',
home_address: '',
country_of_residence: '',
city: '',
dob: '',
age: 0,
loading: false,
education:{
education_level:"",
school:"",
address_of_school:"",
headteacher:"",
telephone:""
},
guardian:{
first_name:'',
middle_name:'',
last_name:'',
relationship_to_orphan:'',
occupation:'',
monthly_income:0.0,
employers_name:'',
work_address:'',
mobile_no:'',
physical_location:'',
comments:''
},
parents:{
religion__of_deceased_father:'',
religion__of_deceased_mother:'',
date_of_demise_of_father:'',
date_of_demise_of_mother:'',
names_of_mother:'',
religion_of_mother:'',
marital_status_of_mother:'',
occupation_of_mother:'',
monthly_income:0
},
siblings:{
number_of_brothers:0,
number_of_sisters:0
}
}
这就是我如何处理提交的
教育
对象处于状态。对于这个案例或部分,当我尝试输入字段时,它工作得很好。
export const EducationComponent = ({handleChange,obj}) => (
<Card s={12}>
<Row>
<label className={'label-style'}>Education.</label>
</Row>
<Row >
<Input s={3} label="Education Level" className={'label-sizes'}
value={obj.education_level} onChange={handleChange} name={'education'}/>
<Input s={3} label="School" className={'label-sizes'}
value={obj.school} onChange={handleChange} name={'school'}/>
<Input s={3} label="Address of School" className={'label-sizes'}
value={obj.address_of_school} onChange={handleChange} name={'address_of_school'}/>
<Input s={3} label="Nationality" className={'label-sizes'}
value={obj.nationality} onChange={handleChange} name={'nationality'}/>
<Input s={3} label="Head Teacher" className={'label-sizes'}
value={obj.headteacher} onChange={handleChange} name={'headteacher'}/>
<Input s={3} label="Telephone" className={'label-sizes'}
value={obj.telephone} onChange={handleChange} name={'telephone'}/>
</Row>
</Card>
)
这个
守护者
节不允许在其字段中键入,我知道这与
onChange
方法,但对我来说似乎很好。我想知道是什么引起的?
它的组成部分如下:
export const GuardianComponent = ({handleChange,obj}) => (
<Card s={12}>
<Row>
<label className={'label-style'}>Guardian Info.</label>
</Row>
<Row >
<Input s={3} label="First Name" className={'label-sizes'} type={'text'}
value={obj.first_name} onChange={handleChange} name={'first_name'}/>
<Input s={3} label="Last Name" className={'label-sizes'}
value={obj.last_name} onChange={handleChange} name={'last_name'}/>
<Input s={3} label="Middle Name" className={'label-sizes'}
value={obj.middle_name} onChange={handleChange} name={'middle_name'}/>
<Input s={3} label="Relationship to the Orphan" className={'label-sizes'}
value={obj.relationship_to_orphan} onChange={handleChange} name={'relationship_to_orphan'}/>
<Input s={3} label="Occupation" className={'label-sizes'}
value={obj.occupation} onChange={handleChange} name={'occupation'}/>
<Input s={3} label="Monthly Income" className={'label-sizes'}
value={obj.monthly_income} onChange={handleChange} name={'monthly_income'}/>
<Input s={3} label="Employers Name" className={'label-sizes'}
value={obj.employers_name} onChange={handleChange} name={'employers_income'}/>
<Input s={3} label="Work Address" className={'label-sizes'}
value={obj.work_address} onChange={handleChange} name={'work_address'}/>
<Input s={3} label="Mobile No." className={'label-sizes'}
value={obj.mobile_no} onChange={handleChange} name={'mobile_no'}/>
<Input s={3} label="Physical Location" className={'label-sizes'}
value={obj.physical_location} onChange={handleChange} name={'physical_location'} />
<Input s={3} label="Comments" className={'label-sizes'}
value={obj.comments} onChange={handleChange} name={'comments'}/>
</Row>
</Card>
)
让我也分享全部
容器
我称之为
无状态组件
用于打字和提交。
class CreatePage extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
middleName: '',
nationality: '',
gender: '',
religion: '',
medical_condition: '',
deceased: '',
home_address: '',
country_of_residence: '',
city: '',
dob: '',
age: 0,
loading: false,
education:{
education_level:"",
school:"",
address_of_school:"",
headteacher:"",
telephone:""
},
guardian:{
first_name:'',
middle_name:'',
last_name:'',
relationship_to_orphan:'',
occupation:'',
monthly_income:0.0,
employers_name:'',
work_address:'',
mobile_no:'',
physical_location:'',
comments:''
},
parents:{
religion__of_deceased_father:'',
religion__of_deceased_mother:'',
date_of_demise_of_father:'',
date_of_demise_of_mother:'',
names_of_mother:'',
religion_of_mother:'',
marital_status_of_mother:'',
occupation_of_mother:'',
monthly_income:0
},
siblings:{
number_of_brothers:0,
number_of_sisters:0
}
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit = (event) => {
event.preventDefault();
const token = localStorage.getItem('token')
let config = {
headers: {
"Authorization" : "Bearer " + token
}
}
const data = this.state;
toast('Data submitted ')
console.log('check data', data)
axios.post('http://localhost:8080/orphan', data, config)
.then(res => console.log('success after submission.',res.data))
.then(error => console.log(error));
};
handleChange = (evt) => {
this.setState({[evt.target.name]: evt.target.value});
}
render() {
return (
<div>
<Row>
<StudentComponent
handleChange={this.handleChange}
obj={this.state}
/>
<EducationComponent
handleChange={this.handleChange}
obj={this.state.education}/>
<GuardianComponent
handleChange={this.handleChange}
obj={this.state.guardian}/>
<ParentComponent
handleChange={this.handleChange}
obj={this.state.parents}/>
<SiblingComponent
handleSubmit={this.handleSubmit}
handleChange={this.handleChange}
obj={this.state.siblings}/>
</Row>
</div>
);
}
}
我想知道为什么我可以输入
教育
成分
领域
但它是嵌套的状态,但我无法键入
守护者
成分
领域
其余的。
我该怎么安排
换上
功能?