Как правильно создать эту модальную реакцию?

Я работал над своим первым приложением Meteor и немного застрял. Я хочу создать свой код в соответствии с последними рекомендациями (ES6 и React 15), но меня смущают все недавние изменения в Javascript.

Я хочу добавить Bootstrap Modal в свой текущий список комментариев, но, похоже, не могу понять, как добавить мой контент в модальный, используя правильно обновленный синтаксис.

Вот мой текущий код:

В comment.js:

import React from 'react';
import { Row, Col, ListGroupItem, FormControl, Button } from 'react-bootstrap';
import { Bert } from 'meteor/themeteorchef:bert';
import { CommentsModal } from './comments-modal'


export const Comment = ({ comment }) => (

  <ListGroupItem key={ comment._id }>
    <Row>
      <Col xs={ 8 } sm={ 10 }>
        <FormControl
          type="text"
          defaultValue={ comment.title }
        />
      </Col>
      <Col xs={ 4 } sm={ 2 }>
        <Button
          bsStyle="danger"
          className="btn-block">
          Remove Comment
        </Button>
      </Col>
    </Row>
    <CommentsModal/>
  </ListGroupItem>
);

В Comments-modal.js:

import React, { Component } from 'react';
import { Modal, Button, Tooltip } from 'react-bootstrap';

export class CommentsModal extends Component {
   constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    };

    this.close = this.close.bind(this);
    this.open = this.open.bind(this);
  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }

  render() {
    return (
      <div>
        <Button
          bsStyle="primary"
          bsSize="large"
          onClick={this.open}
        >
        </Button>

        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title >Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>

          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

И последний комментарий-list.js:

import React from 'react';
import { ListGroup, Alert } from 'react-bootstrap';
import { Comment } from './comment';

    export const CommentsList = ({ comments }) => (
      comments.length > 0 ? <ListGroup className="comments-list">
        {comments.map((com) => (
          <Comment key={ com._id } comment={ com } />
        ))}
      </ListGroup> :
      <Alert bsStyle="warning">No comments yet. Please add some!</Alert>
    );

    CommentsList.propTypes = {
      comments: React.PropTypes.array,
    };

Мне удается заставить модальное окно отображаться и работать, но когда я хочу отображать в нем данные, я не могу заставить его работать. Как лучше всего объединить их в одно?


reactjs javascript meteor react-bootstrap
person Deelux    schedule 31.08.2016    source источник
comment
Как лучше всего объединить их в одно? Объединить и то, и другое в одно? Если я правильно понимаю, вы хотите отображать список комментариев в модальном теле?   -  person aziz punjani    schedule 31.08.2016
comment
Выдает ли ошибки? если есть, покажете ли вы нам?   -  person Mani Shooshtari    schedule 31.08.2016
comment
Я хочу отобразить в нем данные, но не могу заставить его работать. Какие данные, откуда и где они должны отображаться? Ваш модальный код не отображает ничего, кроме <h4>Text in a modal</h4> ??? Я вижу, что comments-list предполагается передать комментарии, поэтому я предполагаю, что это то, о чем вы говорите, но вы не используете это в модальном окне? Вы можете уточнить, что именно здесь не так?   -  person ajmajmajma    schedule 31.08.2016
comment
Извините за неправильную формулировку вопроса и спасибо, что указали на это. Так что мне действительно удалось получить данные в модальном окне, как я хотел. Мне просто нужно было передать свои переменные в ‹CommentsModal /›, о котором я забыл. Позвольте мне теперь переформулировать свой вопрос: можно ли переформатировать мой файл Comments-modal.js, чтобы он также стал функциональным компонентом без статистики? Если да, то как лучше всего это сделать. Это. продолжает меня портить.   -  person Deelux    schedule 31.08.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я стараюсь, если возможно, сохранить локальное состояние вне компонента при использовании redux, поэтому, чтобы ответить на ваш вопрос о том, как сделать его без состояния, я бы предпринял следующие шаги:

  • Удалите кнопку, открывающую модальное окно, из самого modal.js.
  • Удалите модальное окно из файла modal.js, просто поместив туда модальное содержимое.
  • Измените кнопку открытия модального окна, чтобы подключиться к создателю действия, который устанавливает опору для открытия модального окна и передает его содержимое (также установите один, чтобы закрыть его)

Это выглядит примерно так

 <ListGroupItem key={ comment._id }>
<Row>
  <Col xs={ 8 } sm={ 10 }>
    <FormControl
      type="text"
      defaultValue={ comment.title }
    />
  </Col>
  <Col xs={ 4 } sm={ 2 }>
    <Button
      bsStyle="danger"
      className="btn-block">
      Remove Comment
    </Button>
  </Col>
</Row>

<!-- Here is where it changes, -->
 <Button
      bsStyle="primary"
      bsSize="large"
      onClick={this.props.openModal(comment)}
    >
    </Button>

    <Modal show={this.props.commentModal} onHide={this.props.closeModal}>
       <CommentsModal content={this.props.commentModal} />
    </Modal>

Keep in mind, these naming conventions are just for examples sake : use whatever works best for you.

Итак, что здесь происходит, когда вы нажимаете эту кнопку, вы запускаете this.props.openModal (действие), которое делает что-то вроде этого в редукторах:

 case actions.OPEN_COMMENT_MODAL:
       return state.set('commentModal', action.content);

кнопки закрытия запускают onHide, который связан с действием this.props.closeModal, которое просто выполняет:

case actions.OPEN_COMMENT_MODAL:
       return state.set('commentModal', undefined);

Итак, что это позволяет вам сделать, так это иметь только 1 модальный экземпляр, и вы передаете ему текущий комментарий с помощью этой кнопки и открываете его. Шоу просто проверяет истинное значение, поэтому вы устанавливаете его обратно на undefined, и оно скроется.

Затем я передаю опору content в модальное окно, чтобы вы могли использовать его внутри самого модального окна. Опять же, измените имена на те, которые подходят вам лучше всего.

person ajmajmajma    schedule 31.08.2016
comment
Спасибо за отличное объяснение, я попробую! - person Deelux; 31.08.2016
comment
@Deelux отлично, дайте мне знать, если у вас возникнут проблемы. - person ajmajmajma; 01.09.2016

arrow_upward
2
arrow_downward

Передайте данные в реквизитах в CommentsModal и визуализируйте их, как обычно.

person vijayst    schedule 31.08.2016
comment
В самом деле, я забыл об этом. Спасибо - person Deelux; 31.08.2016