0

我在我的测试组件中渲染了 EditModal 组件。我通过“this.edit”引用它。我将 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;
4

1 回答 1

0

this.form一旦UserForm组件被挂载(大概EditModal在.EditModalref

因此,如果this.form未定义,则它尚未安装,或者已卸载(在调用测试方法时)或ref已被覆盖。

如果没有代码,EditModal任何人都无法确定上述哪种情况。

于 2018-04-21T18:51:29.127 回答