React Modal ref未定义!无法添加自定义属性

时间:2016-12-23 15:05:00

标签: javascript reactjs modal-dialog react-bootstrap react-dom

我有一个简单的模态:

renderModalForm() {
    return (
      <Modal
        closeTimeoutMS={150}
        show={this.state.isModalOpen}
        onHide={this.isModalOpen.bind(this)}
      >
        <Modal.Body>
          <div className="close-button-modal">
            <i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}></i>
            <div className="clearfix"></div>
          </div>
          <div ref="test" className="testclassname">
          </div>
        </Modal.Body>
      </Modal>
    );
  }

我唯一的目标是向div

引用的ref="test"注入一个自定义属性(不幸的是,它不能以数据或咏叹调开头,因为它是由第三方定义的)

当我尝试注入自定义属性时:

someButtonClicked() {
    setTimeout(() => {
      this.setState({
        isModalOpen: true
      })
    }, 100);
    var element = ReactDOM.findDOMNode(this.refs.test);
    element.setAttribute('doku-div', 'form-payment');
}

此处元素始终未定义,因此setAttribute失败;如果我去检查元素,ref="test"上就不存在<div>!有人可以帮我解释为什么在模态中缺少这个引用吗?

1 个答案:

答案 0 :(得分:0)

尝试将代码移至ComponentDidMountComponentDidUpdate方法。那里的参考不应该是不确定的。

您还可以使用回调来存储对DOM节点的引用:

<Modal.Body>
          <div className="close-button-modal">
            <i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}></i>
            <div className="clearfix"></div>
          </div>
          <div ref="{(testNode) => { this.testNode = testNode; }}" className="testclassname">
          </div>
</Modal.Body>

然后使用该引用而不是使用ReactDOM:

someButtonClicked() {
    setTimeout(() => {
        this.setState({
          isModalOpen: true
        })
    }, 100);

    var element = this.testNode;
    this.testNode.setAttribute('doku-div', 'form-payment');
}