代码之家  ›  专栏  ›  技术社区  ›  Lutaaya Huzaifah Idris

不能在嵌套状态的某些字段中键入

  •  0
  • Lutaaya Huzaifah Idris  · 技术社区  · 6 年前

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

    以下是状态:

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

    我想知道为什么我可以输入 教育 成分 领域 但它是嵌套的状态,但我无法键入 守护者 成分 领域 其余的。

    我该怎么安排 换上 功能?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Ryan Cogswell    6 年前

    令人惊讶的是,卫报领域不起作用,而教育领域起作用。我怀疑只有在“教育水平”字段中输入内容时,教育字段才起作用。您已将其名称指定为“教育”而不是“教育级别”,因此 handleChange 然后将用字符串替换处于状态的整个“education”对象。在那之后, obj.fieldname 对所有“教育”领域都没有定义,因为 obj 现在将是一个字符串。这就把你的教育领域变成了不受控制的组成部分 value 属性不再控制显示的内容,因此键入可以工作。如果你把“教育水平”的字段名称改为“教育水平”,而不是“教育”,我怀疑教育领域会像卫士领域一样工作(即它们不会工作)。

    为了让这个工作,你的 换手 除了字段名外,还需要了解状态中的父项(例如“教育”、“监护人”)。

    你的 换手 可能看起来更像以下内容:

    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}/>
    

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