Javascript 使用React引导模式的未捕获不变冲突

我最近开始玩react，我遇到了一个问题。我不知道为什么它会给我这个问题。我已经在Google和S/O上搜索过了，但是我找不到我的代码导致错误的原因

我已经在我的项目中安装了react引导。我可以确认，这是工作，因为我能够加载所有组件没有任何问题

然而，在这段代码中，当我在表单周围添加一个

包装时，出现了一个“未捕获不变冲突：addComponentAsRefTo…”错误（没有包装，我的表单可以正常工作）

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

handleClick（）{
var foo=this.refs.foo.value；
...
render（）{
var Modal=require（'react-bootstrap'）。Modal；
返回(
提交
)
}
...

---

有人能帮助我理解为什么在模型组件中包装表单输入时出现“ref”错误吗？

查看react引导源代码，他们希望您使用其子组件包装内容尝试以下操作：

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

提交

谢谢@finalfreq。我试过了，但还是出现了同样的问题。我也试过用react引导组件替换我的输入。仍然是同样的错误。如果从输入中删除ref=foo会发生什么仍然是一样的。看起来像是其他人解决问题的方式一样

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