javascript - React Modal 确认无法正常工作

Question

我是 ReactJS 新手。在我的组件 AllHeroes.js 中，我希望当我单击“删除”时，模态框会显示“是/否”选项。

这是引用:https://react-bootstrap.github.io/components/modal/

但是，模态框不会显示为弹出窗口，它显示在表单的正下方，没有任何样式。

这是我的 AllHeroes.js 代码

import React, { Component } from 'react';
import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AddHero from './AddHero';
import EditHero from './EditHero';
import { Button, ButtonToolbar, Modal } from 'react-bootstrap';


class AllHeroes extends Component {
  constructor(props) {
    super(props);

    this.state = {
      show: false
    }

    this.OnEditHandle = this.OnEditHandle.bind(this);
    this.OnDeleteHandle = this.OnDeleteHandle.bind(this);
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }


  OnEditHandle(id) {
    //const id = arguments[0];
    window.location = '/Edit/' + id;
  }

  OnDeleteHandle(id) {
    debugger
    this.setState({
      show: true
    })
  }

  handleClose() {
    this.setState({ show: false });
  }

  handleShow() {
    this.setState({ show: true });
  }


  render() {

    let closeModal = () => this.setState({ show: false })

    return (

      <div className="container">
        <h1>All Heroes</h1>
        <table>
          <tbody>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Dob</th>
              <th>Stocked</th>
              <th>Price</th>
            </tr>
            {
              this.props.GetAllHeroes().map(item => (
                <tr key={item.Id}>
                  <td>{item.Id}</td>
                  <td>{item.Name}</td>
                  <td>{item.Dob.toLocaleString()}</td>
                  <td>{item.Stocked.toString()}</td>
                  <td>{item.Price}</td>
                  <td><button onClick={() => this.OnEditHandle(item.Id)}>Edit</button></td>
                  <td><button onClick={() => this.OnDeleteHandle(item.Id)}>Delete</button></td>
                </tr>
              ))
            }
          </tbody>
        </table>


        <Modal show={this.state.show} onHide={this.handleClose} animation={true}>
          <Modal.Header closeButton>
            <Modal.Title>Delete</Modal.Title>
          </Modal.Header>
          <Modal.Body>Are you sure to delete this Hero?</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={() => this.handleClose}>
              No
            </Button>
            <Button variant="primary" onClick={() => this.handleClose}>
              Yes
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

export default AllHeroes;

请帮助正确显示模态框作为此引用。

Answer 1

您忘记导入 Bootstrap 样式表。您可以通过“Button”和“Modal”组件清楚地看到它。

如 react-bootstrap 文档中所述:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components.

然后您还应该在项目中安装 bootstrap

npm install --save bootstrap
yarn add bootstrap

并在 src/index.js 中导入 .css 文件

import 'bootstrap/dist/css/bootstrap.css';