为什么ref失去对实际DOM元素的引用？

Question

如下所示，CustomNode中的每个onclick事件都会触发inputNode调度dom事件。它以某种方式提示dispatchEvent is not a function。似乎ref并未按预期引用正确的DOM元素。据我所知，ReactDOM.createPortal使组件可以访问父上下文，但是为什么在这种情况下却不是这样呢？有人知道为什么吗？

main.js

class Test extends React.Component {
  constructor(props){
    super(props)

  }
  renderModal() {
    let tpl = <div>
                <input ref={(node)=>{
                  this.input = node
                }} />    
                <CustomNode    
                  inputNode={this.input || {}}
                  keyboardType={"number"}
                  layouts={[NumberLayout]}
                />  
              </div>
     Dialog.confirm({
       content: tpl
     })


  }
  render() {
    const {isShow} = this.state

    if(isShow){
      this.renderModal()
    }
    return <div>  
                123                     
          </div>
  }
}
export default Test

CustomNode.js

class CustomNode extends PureComponent {


    onClick (key, type) {
        const {inputNode} = this.props;
        inputNode.dispatchEvent(new Event('input', {bubbles: true}));
    }

    render() {
        return <div onClick={this.onClick}></div>
    }
}

Dialog.js

  class Dialog extends React.Component {
    constructor(props) {
      super(props)
    }
    render{
      let {content} = this.props
       return ReactDOM.createPortal(
        <div>
          {content}
        </div>,
        document.body
      ); 
    }

  }


  static confirm(params) {
    const container = document.createElement("span");
    document.body.appendChild(container);
    return ReactDOM.render(<Dialog {...params} />, container);
  }


export default {
  confirm
}