Question

我目前正在使用react模式引导来显示模态弹出窗口，但似乎我的代码中出现了问题。这是我的代码。我检查了以下网站作为代码的参考。 https://react-bootstrap.github.io/components/modal/

import React, { Component } from 'react';
import ModalList from './ModalList';
import '../css/MyPlacesEntry.css';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';


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

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

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

  render() {
    return (
      <div>
        <div className="container">
          <div className="row">
            <div className="col-lg-8 col-md-10 mx-auto">
              {/* {console.log("111111", this)} */}
              <div className="post-preview" >
                <h2 className="post-menu" onClick={this.toggleModal.bind(this)}>{this.props.i.menu}</h2>
                <ModalList item={this.props.i} showModal={this.state.showModal} close={this.close.bind(this)} />
                <h5 className="post-comment">{this.props.i.comment}</h5>
                <p className="post-meta">Posted by&nbsp;
                <a href="#">{this.props.i.gmailAccount}</a>
                  &nbsp;on january 23, 2018</p>
                <hr />
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default MyPlacesEntry;

我试图使用onClick事件将showModal作为true传递给ModalList，但我不确定它是否正确编码。

import React, { Component } from 'react';
import MyPlacesEntry from './MyPlacesEntry';
import { Modal, Button } from 'react-bootstrap';

class ModalList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Modal {...this.props} bsSize="large" aria-labelledby="contained-modal-title-lg">
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-lg">{this.props.title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>
            price
          </p>
          <p>
            {this.props.price}
          </p>
          <p>
            menu
          </p>
          <p>
            {this.props.menu}
          </p>
          <p>
            comment
          </p>
          <p>
            {this.props.comment}
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onClose}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

这些代码几乎来自参考页面，但我不确定应该实现哪些代码来显示模态弹出窗口。如果你能解决这个问题，我将不胜感激。

谢谢！

Answer 1

使用React-Bootstrap（https://react-bootstrap.github.io/components/modal）。在此链接中，您可以找到有关如何使用模式或其他东西的示例。这样，您可以将Modal用作反应组件，例如：<Modal/>

如何正确显示模态弹出窗口与模态引导反应？

1 个答案: