React Modal ref Nicht definiert! Kann benutzerdefinierte Add

Question

Attribut Ich habe eine einfache modale:

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

Mein einziges Ziel ist es, ein benutzerdefiniertes Attribut (die leider mit Daten- oder aria- kann nicht gestartet werden, da sie von Dritten definiert ist) zu injizieren, um die div verwiesen von ref="test"

Wenn ich das benutzerdefinierte Attribut zu injizieren versuchen:

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

Hier Element ist immer undefiniert, so setAttribute gescheitert; Wenn ich das Element überprüfe, existiert ref="test" nicht am <div>! Kann mir jemand helfen, warum dieser Hinweis im Modal fehlt?

Answer 1

Versuchen Sie, Ihren Code auf ComponentDidMount oder ComponentDidUpdate Methode zu verschieben. Refs sollten dort nicht undefiniert sein.

Sie können auch einen Rückruf speichern einen Verweis auf den DOM-Knoten verwenden:

<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> 

Und dann diese Referenz verwenden anstelle der Verwendung ReactDOM:

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

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