Блог

Недавно я начал играть с react и столкнулся с проблемой. Я понятия не имею, почему это вызывает у меня эту проблему. Я искал в Google и 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>