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样式表。 您可以通过“按钮”和“模块”组件清楚地看到它。

如react-bootstrap文档中所述：

因为React-Bootstrap不依赖于Bootstrap的非常精确的版本，所以我们不附带任何附带的CSS。 但是，使用这些组件需要一些样式表。

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

npm install --save bootstrap
yarn add bootstrap

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

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

Answer 2

在这里您添加：

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