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'