Response - ссылка на компонент, переданный как подсказка

kostik спросил: 28 марта 2018 в 04:16 в: reactjs

Я передал компонент 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;

1 ответ

Есть решение
lorefnon ответил: 28 марта 2018 в 05:11

this.form будет доступен после монтирования компонента UserForm (предположительно внутри EditModal) и только если EditModal это сделает не клонировать опору формы и переопределяет ref.

Поэтому, если this.form не определен, либо он еще не был смонтирован, либо был размонтирован ( метод временного теста) или ref был переопределен.

Без кода для EditModal никто не может определить, что из перечисленного выше дело.

kostik ответил: 28 марта 2018 в 05:26
setTimeout (function () {console.log (this.form);} .bind (this), 3000); Теперь он возвращает объект в тестовом методе. Благодарю.
lorefnon ответил: 28 марта 2018 в 05:45
Возможно, вы захотите найти лучший подход, чем использовать setTimeout. Возможно, вы сможете запустить операцию, которая зависит от this.editForm в самом обратном вызове ref при получении экземпляра компонента.