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

Question

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

我已经在我的项目中安装了 react-bootstrap。我可以确认这是有效的，因为我可以毫无问题地加载所有组件。

然而，在这段代码中，当我在我的表单周围添加 <Modal/> 包装器时（没有包装器，我的表单可以正常工作），我会收到“未捕获的不变违规：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

查看 react bootstrap 源代码，他们希望您使用其子组件 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>