Я передал компонент EditModal в свой тестовый компонент. Iam, ссылаясь на него с помощью this.edit.I передал компонент UserForm в качестве приглашения EditModal. Я также попытался это сделать. Но 'this.form' возвращает неопределенный.
Почему? Есть ли способ решить это?
class Test extends React.Component { test(){
this.form.someMethod();
} render() {
return (
<div>
<EditModal form={<UserForm ref={(form) => { this.form = form; }} />} ref={(edit) => { this.edit = edit; }}/>
</div>
);
}
}
export default Test;
// EditModal.js
class EditModal extends React.Component {
constructor() {
super();
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = { show: false};
} handleClose() {
this.setState({ show: false });
} handleShow(id) {
this.setState({ show: true, currentId: id});
} render() {
return (
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton={false}>
<Modal.Title>Uprav zaznam</Modal.Title>
</Modal.Header>
<Modal.Body>
{this.props.form}
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleClose}>Zatvorit</Button>
</Modal.Footer>
</Modal>
);
}
}export default EditModal;
this.form
будет доступен после монтирования компонентаUserForm
(предположительно внутриEditModal
) и только еслиEditModal
это сделает не клонировать опору формы и переопределяетref
.Поэтому, если
this.form
не определен, либо он еще не был смонтирован, либо был размонтирован ( метод временного теста) илиref
был переопределен.Без кода для
EditModal
никто не может определить, что из перечисленного выше дело.