Uncaught Invariant Violation mit React Bootstrap modal

Question

Ich begann vor kurzem mit reagieren zu spielen und ich bin auf ein Problem gestoßen. Ich habe keine Ahnung, warum es mir dieses Problem gibt. Ich habe auf Google und S/O gesucht, kann aber nicht den Grund finden, warum mein Code zu einem Fehler führt.

Ich habe React-Bootstrap in meinem Projekt installiert. Ich kann bestätigen, dass dies funktioniert, da ich alle Komponenten ohne Probleme laden kann.

In diesem Stück Code jedoch bin ich mit einem 'Uncaught Invariant Violation: addComponentAsRefTo ...' Fehler angezeigt, wenn ich einen <Modal/> Wrapper um mein Formular hinzufügen (ohne den Wrapper mein Formular funktioniert gut). Hier

ist einige meiner Code (alle in derselben Komponente enthalten):

handleClick() { 
    var foo = this.refs.foo.value; 
... 

render() { 
    var Modal = require('react-bootstrap').Modal; 
    return (
    <Modal show={this.state.showModal} onHide={this.close}> 
     <div> 
     <input ref='foo' /> 
     <button onClick={this.handleClick}>Submit</button> 
     </div> 
    </Modal> 
) 
} 
... 

Könnte jemand bitte helfen Sie mir zu verstehen, warum ich immer die ‚ref‘ Fehler, wenn ich meine Form Eingang in eine wickeln Modellkomponente?

Answer 1

bei der Suche reagieren Bootstrap-Quellcode sie erwarten, dass Sie die Inhalte wickeln ihre Subkomponenten mit diesem https://react-bootstrap.github.io/components.html#modals-live versuchen:

<Modal show={this.state.showModal} onHide={this.close}> 
    <Modal.Body> 
    <div> 
     <input ref='foo' /> 
     <button onClick={this.handleClick}>Submit</button> 
    </div> 
    </Modal.Body> 
</Modal>