Javascript Can'；在嵌套状态的某些字段中键入t

我有两个以上的嵌套状态数据要发布，每个嵌套部分都有自己的组件来处理它的提交，但是第一部分允许一个人在其字段中键入，而其余部分不允许

下面是状态：

  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>

)

还让我共享完整的容器类，在该类中，我调用所有的无状态组件进行键入和提交

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>
        );
    }

}

类CreatePage扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：''，
姓氏：“”，
中间名：“”，
国籍：“，
性别：''，
宗教：''，
医疗条件：''，
死者：“，
家庭地址：“”，
居住国：''，
城市：''，
出生日期：''，
年龄:0,，
加载：false，
教育：{
教育程度：“，
学校：“，
学校地址：“，
校长：“，
电话：“
},
监护人：{
名字：''，
中间名称：“”，
姓氏：“”，
与孤立对象的关系：“”，
职业：''，
月收入：0.0，
雇主名称：''，
工作地址：''，
手机号码：''，
物理位置：“”，
评论：“”
},
家长：{
已故父亲的宗教：''，
已故母亲的宗教：''，
父亲去世日期：''，
母亲去世日期：''，
母亲的姓名：“”，
母亲的宗教：''，
母亲的婚姻状况：“”，
母亲的职业：''，
月收入：0
},
兄弟姐妹：{
兄弟数：0，
姐妹人数：0
}
}
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
handleSubmit=（事件）=>{
event.preventDefault（）；
const token=localStorage.getItem（'token'）
让配置={
标题：{
“授权”：“持票人”+代币
}
}
const data=this.state；
toast（'数据已提交'）
console.log（'检查数据'，数据）
轴心柱http://localhost:8080/orphan，数据，配置）
.then（res=>console.log（'提交后成功'，res.data））
.then（error=>console.log（error））；
};
handleChange=（evt）=>{
this.setState（{[evt.target.name]：evt.target.value}）；
}
render（）{
返回(
);
}
}

我想知道为什么我可以输入教育组件字段，但它的状态是嵌套的，但我不能输入监护人组件字段和其他字段

---

如何构建我的

onChange

功能？

令人惊讶的不是监护人字段不起作用，而是教育字段起作用。我怀疑只有在“education_level”字段中首先键入内容时，education字段才起作用。您已将其名称指定为“education”而不是“education_level”，因此

handleChange

将用字符串替换状态中的整个“education”对象。在此之后，所有“教育”字段的

obj.fieldname

都将是未定义的，因为

obj

现在将是一个字符串。这将使您的教育字段变成不受控制的组件--

值

属性不再控制显示的内容，因此键入可以正常工作。如果您将“education_level”字段名更改为“education_level”而不是“education”，我怀疑education字段将像guardian字段一样工作（即，它们不会工作）

为了使其正常工作，您的

handleChange

除了字段名之外，还需要了解状态中的父密钥（例如“education”、“guardian”）

您的

handleChange

看起来更像以下内容：

handleChange = (parentKey, evt) => {
    this.setState({[parentKey]: {...this.state[parentKey], [evt.target.name]: evt.target.value}});
}

然后像这样使用它：

<GuardianComponent
    handleChange={(event)=> this.handleChange('guardian', event)}
    obj={this.state.guardian}/>

this.handleChange（'guardian'，event）}
obj={this.state.guardian}/>

---

我实际上还没有尝试过这个方法，所以如果我在上面犯了任何语法错误，我很抱歉，但我认为这个方法应该是合理的。

令人惊讶的不是监护人字段不起作用，而是教育字段起作用。我怀疑只有在“education_level”字段中首先键入内容时，education字段才起作用。您已将其名称指定为“education”而不是“education_level”，因此

handleChange

将用字符串替换状态中的整个“education”对象。在此之后，所有“教育”字段的

obj.fieldname

都将是未定义的，因为

obj

现在将是一个字符串。这将使您的教育字段变成不受控制的组件--

值

属性不再控制显示的内容，因此键入可以正常工作。如果您将“education_level”字段名更改为“education_level”而不是“education”，我怀疑education字段将像guardian字段一样工作（即，它们不会工作）

为了使其正常工作，您的

handleChange

除了字段名之外，还需要了解状态中的父密钥（例如“education”、“guardian”）

您的

手乐昌
<GuardianComponent
    handleChange={(event)=> this.handleChange('guardian', event)}
    obj={this.state.guardian}/>