我最近开始玩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>