使用React Bootstrap模式取消捕获的不变量违规

Uncaught Invariant Violation using React Bootstrap modal

本文关键字：不变量 React Bootstrap 模式 取消 使用      更新时间：2023-09-26

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

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

然而，在这段代码中，我看到了一个"未捕获的不变量违规:addComponentAsRefTo…"'错误，当我添加一个<Modal/>包装围绕我的表单(没有包装我的表单工作良好)。

下面是我的一些代码(都包含在同一个组件中):

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'错误，当我包装我的表单输入在一个模型组件?

查看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>
相关文章：