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

Question

我最近开始玩反应，我遇到了一个问题。 我不知道为什么它会给我这个问题。 我在谷歌和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>
  )
}
...

当我将表单输入包装在模型组件中时，是否有人可以帮助我理解为什么我收到'ref'错误？

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>