Question

子组件在展平时能够访问状态 -

this.state = {
        name: '',
        email: ''
};

以下是视图代码

    <Form
        handleFormChange={this.props.handleFormChange}
        name={this.props.name}
        email={this.props.email} />

但是当状态以嵌套方式构建时，组件无法访问它

   this.state = {
        company: {
            name: '',
            email: ''
        }
    }

使用此对应的视图代码

  <Form
       handleFormChange={this.props.handleFormChange}
       name={this.props.company.name}
       email={this.props.company.email} />

它声明“无法读取属性'名称'未定义（...）”

完整组件：的 company.js

    export default class Company extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                company: {
                    name: '',
                    email: ''
                }
            };
        };
        render() {
            return (
                    <AddCompanyModal
                        activeAddDialog={this.state.activeAddDialog}
                        addDialog={this.addDialog}
                        saveData={this.saveData}
                        handleFormChange={this.handleFormChange} />
            )
       }
   }

addCompanyModal.js

export default class AddCompanyModal extends React.Component {

    render() {
        return (
            <Dialog
                active={this.props.activeAddDialog}
                onEscKeyDown={this.props.addDialog}
                onOverlayClick={this.props.addDialog}
                title='Add Company Information'
                >
                <CompanyForm
                    handleFormChange={this.props.handleFormChange} />
            </Dialog>
        )
    }
}

CompanyForm.js

export default class CompanyForm extends React.Component {
    render() {
        return (
            <section>
                <Input
                    icon='business'
                    type='text'
                    label='Name'
                    name={this.state.company.name}
                    value={this.state.company.name}
                    onChange={this.props.handleFormChange.bind(this, 'name')} />
            </section>
        )
    }
}

Answer 1

你混合了道具和国家。

<Form
   handleFormChange={this.props.handleFormChange}
   name={this.state.company.name}
   email={this.state.company.email} />

无法访问对象

1 个答案: