Неперехваченное инвариантное нарушение с использованием модального окна React Bootstrap

Недавно я начал играть с response, и у меня возникла проблема. Я понятия не имею, почему это вызывает у меня эту проблему. Я искал в Google и S / O, но не могу найти причину, по которой мой код вызывает ошибку.

Я установил в свой проект response-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» при переносе ввода формы в компонент модели?


reactjs javascript twitter-bootstrap react-bootstrap
person HermannHH    schedule 30.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

глядя на исходный код начальной загрузки реакции, они ожидают, что вы обернете содержимое с помощью их подкомпонентов 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>
person finalfreq    schedule 30.09.2016
comment
Спасибо @finalfreq. Я пробовал это, но проблема все еще та же. Я также попытался заменить свои входные данные компонентами начальной загрузки реакции. Все та же ошибка. - person HermannHH; 01.10.2016
comment
Что произойдет, если вы удалите ref = foo из ввода - person finalfreq; 02.10.2016
comment
Все тот же. - person HermannHH; 02.10.2016
comment
Похоже, что это известная проблема, которую решили другие, здесь github.com/ реакция-бутстрап / реакция-бутстрап / проблемы / 223 - person finalfreq; 03.10.2016