Question

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

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

然而，在这段代码中，我提出了一个＆＃39; Uncaught Invariant Violation：addComponentAsRefTo ...＆＃39;我在表单周围添加<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>
  )
}
...

任何人都可以帮助我理解为什么我会得到这样的参考资料。将表单输入包装在模型组件中时出错？

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>

使用React Bootstrap模式

1 个答案: