0

私は単純なモーダルを持っています:

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>
    );
  }

私の唯一の目的は、カスタム属性（残念ながら、サードパーティによって定義されているため、 data- または aria- で開始することはできません）を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>この参照がモーダル内にない理由について、誰かが私を助けることができますか?

4

2 に答える 2

0

コードをComponentDidMountまたはComponentDidUpdateメソッドに移動してみてください。参照はそこで未定義であってはなりません。

コールバックを使用して、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');
}
于 2016-12-23T15:24:11.867 に答える