使用React Bootstrap模式的未捕获不变违规

Question

最近我开始玩弄反应，并且遇到了问题。我不知道为什么它给了我这个问题。我在Google和S/O上搜索过，但我无法找到我的代码导致错误的原因。

我在我的项目中安装了react-bootstrap。我可以确认这是工作的，因为我可以加载所有组件，而不会有任何问题。

但是在这段代码中，当我在表单中添加一个<Modal/>包装（没有包装我的表单工作正常）时，出现'Uncaught Invariant Violation：addComponentAsRefTo ...'错误。

下面是一些我的代码（在同一组件中包含的所有）：

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

有谁请帮助我了解为什么我收到了“裁判”的错误，当我换在我的表单输入模型组件？

Answer 1

看反应，他们希望你使用他们的子https://react-bootstrap.github.io/components.html#modals-live试试这个包裹的内容引导源代码：

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