Вопрос:

Реагируйте на js и bootstrap модально из примеров на github

javascript twitter-bootstrap-3 reactjs

9898 просмотра

2 ответа

736 Репутация автора

Я пытаюсь настроить приложение с реагировать, и все идет хорошо, за исключением моего модального. Я использовал этот код по следующей ссылке, нетронутый, и я получаю ошибки. https://github.com/facebook/react/blob/master/examples/jquery-bootstrap/js/app.js

Попробуйте эту скрипку http://jsbin.com/eGocaZa/1/edit?html,css,output

Функции обратного вызова, похоже, не имеют доступа к «этому». Если вы регистрируете «this» в консоли, он регистрирует объект окна.

openModal: function() {
  this.refs.modal.open();
},

Я пропустил это и возвратил новую функцию, которая, казалось, работала, но не выглядела правильно и не очень хорошо играла с jsfiddle. Я получил модальное включение локально, но затем я столкнулся с той же проблемой с функцией закрытия. Любая помощь будет оценена. Спасибо!

var Example = React.createClass({
  handleCancel: function() {
    if (confirm('Are you sure you want to cancel?')) {
      this.refs.modal.close();
    }
  },

  render: function() {
    var modal = null;
    modal = (
      <BootstrapModal
        ref="modal"
        confirm="OK"
        cancel="Cancel"
        onCancel={this.handleCancel}
        onConfirm={this.closeModal}
        title="Hello, Bootstrap!">
        This is a React component powered by jQuery and Bootstrap!
      </BootstrapModal>
    );
    return (
      <div className="example">
          {modal}
        <BootstrapButton onClick={this.openModal(this)}>Open modal</BootstrapButton>
      </div>
    );
  },

  openModal: function(obj) {
    return function(){obj.refs.modal.open();}
  },

  closeModal: function() {
    this.refs.modal.close();
  }
});
Автор: BrettAHale Источник Размещён: 19.09.2013 04:14

Ответы (2)


7 плюса

103684 Репутация автора

Решение

Я нашел несколько проблем с вашим кодом:

  1. Вы загружали Bootstrap JS до jQuery, но его нужно загрузить после.
  2. Вы использовали React 0.3.0, у которого были разные правила области видимости для методов компонента - начиная с React 0.4, методы привязываются к компоненту автоматически . Вы могли бы написать openModal: React.autoBind(function() { this.refs.modal.open(); })или onClick={this.openModal.bind(this)}в React 0.3, но обновление до 0.4 устраняет необходимость связывания вручную.
  3. У вашего модала был hideкласс, который, казалось, делал его невидимым; Я удалил его, и теперь, кажется, появляется модальное. Я не уверен в настоящее время, почему это ведет себя по-разному между вашим кодом и примером.

Вот мой рабочий пример jsbin . К модалу, похоже, применен какой-то странный CSS, но я не думаю, что он связан с React, поэтому я оставлю вас здесь. Дайте мне знать, если что-то неясно.

Автор: Sophie Alpert Размещён: 19.09.2013 04:58

2 плюса

736 Репутация автора

Конечно, я работал над этим всю ночь, а затем выяснял ответ после того, как задал вопрос здесь, но вот решение.

Функции, которые нужно было обернуть в autoBind, чтобы получить доступ к «this». Вот затронутые функции ...

    close: React.autoBind(function() {console.log(this);
    $(this.getDOMNode()).modal('hide');
}),
open: React.autoBind(function() {
    $(this.getDOMNode()).modal('show');
}),
...
handleCancel: React.autoBind(function() {
    if (this.props.onCancel) {
        this.props.onCancel();
    }
}),
handleConfirm:React.autoBind(function() {
    if (this.props.onConfirm) {
        this.props.onConfirm();
    }
})
...
openModal: React.autoBind(function() {
    this.refs.modal.open();
}),
closeModal: React.autoBind(function() {
        this.refs.modal.close();
})
Автор: BrettAHale Размещён: 19.09.2013 05:13
Вопросы из категории :
32x32