如何在 React 中显示 Bootswatch 模式?

问题描述 投票:0回答:1

我想在单击 React 中的按钮时显示模式组件。我按照教程进行操作,但我的模式仍然没有出现。

当我在模态中放置文本时,单击时会出现文本,但如果放置 bootswatch 组件则不会出现文本(https://bootswatch.com/lux/)。

我导入了主题的两个CSS文件: 导入'../node_modules/bootswatch/dist/lux/bootstrap.css'; 导入'../node_modules/bootswatch/dist/lux/bootstrap.min.css';

但不是 sccs 文件,因为他们在编译过程中问了我一些问题。 这可能是我的问题的原因吗? 所有其他组件仅使用这两个文件就可以了。

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from '../pages/home.js';
import Logo from '../img/logo.png';
import ModalLoginRegister from './modalLoginRegister';

export default class Header extends React.Component{
      state = {
        visible: false
      };

      onShow = () => this.setState({ visible: true });
      onHide = () => this.setState({ visible: false });
      render(){
        const { visible } = this.state;
        return (
          <Router>
              <nav class="navbar navbar-expand-lg navbar-light bg-light" >
                <img src={Logo} alt="Logo" />
                <a class="navbar-brand" href="#"> TheQuest</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarColor02">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                      <Link class="nav-link" to="/">Home</Link>
                    </li>
                    <li class="nav-item">
                      <Link class="nav-link" to="/browse">Browse</Link>
                    </li>
                    <li class="nav-item">
                      <Link class="nav-link" to="/create">Create</Link>
                    </li>
                    <li class="nav-item">
                      <Link class="nav-link" to="/favorite">Favorite</Link>
                    </li>
                  </ul>
                </div>
                <button type="button" class="btn btn-secondary" onClick={this.onShow}>
                      Login / Register
                </button>
                <ModalLoginRegister visible={visible} onHide={this.onHide}/>
            </nav>

            <Route exact path="/" component={Home} /> 
            <Route path="/browse" component={Browse} />
            <Route path="/create" component={Create} />
            <Route path="/favorite" component={Favorite} />
         </Router>
        );
      }
  }

  function Browse() {
    return (
      <div>
        <h2>Browse</h2>
      </div>
    );
  }

  function Create() {
    return (
      <div>
        <h2>Create</h2>
      </div>
    );
  }

  function Favorite() {
    return (
      <div>
        <h2>Favorite</h2>
      </div>
    );
  }
import React from 'react';

export default class ModalLoginRegister extends React.Component{
    onHide = e => {
        this.props.onHide && this.props.onHide(e);
    };
    render() {
        if(!this.props.visible){
            return null;
        }
        console.log("Show modal test");
        return(

            <div class="modal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Modal body text goes here.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" 
                            onClick={this.onHide}>Close</button>
                    </div>
                    </div>
                </div>
            </div>
        );
    }
}

当我点击“登录/注册”按钮时,没有任何显示。但此消息出现在我的终端上:“显示模态测试”。 除此之外,我的终端没有任何错误

reactjs bootstrap-modal
1个回答
0
投票

您所面临的模式未在 React 组件中打开的问题是因为您尝试使用

data-toggle
data-target
等数据属性来集成 Bootstrap 模式。这些属性是 Bootstrap
JavaScript approach which manipulates the DOM directly
的一部分。然而,在 React 环境中,直接 DOM 操作不是标准做法,并且可能无法按预期工作,因为
React maintains a virtual DOM

这里有一个提示,告诉你如何实现它。 模态组件:

import React from 'react';

export const Modal = ({ show, onClose, onApprove }) => {
    if (!show) {
        return null;
    }

    return (
        <div className="modal show" style={{ display: 'block' }} id="exampleModal">
            <div className="modal-dialog" role="document">
                <div className="modal-content">
                    <div className="modal-header">
                        <h5 className="modal-title">Please, confirm deletion</h5>
                        <button type="button" className="btn-close" onClick={onClose} aria-label="Close">
                            <span aria-hidden="true"></span>
                        </button>
                    </div>
                    <div className="modal-body">
                        <p>Do you really wanna delete this task?</p>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-primary" onClick={onApprove}>Yes</button>
                        <button type="button" className="btn btn-secondary" onClick={onClose}>No</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

这是一个必须打开模态窗口的组件。就我而言,它是一个任务项,它打开模态窗口并询问用户是否确定要删除任务:

import React, { useState } from 'react';
import { Modal } from '../Modal/Modal';

export const ListItem = ({ data, onDelete }) => {
    const [showModal, setShowModal] = useState(false);

    const openModal = () => setShowModal(true);
    const closeModal = () => setShowModal(false);

    const handleApprove = () => {
        onDelete(data.id);
        closeModal();
    };

    return (
        <div className="mt-3">
            <Modal show={showModal} onClose={closeModal} onApprove={handleApprove} />
            <li className="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
                <span>{data.title}</span>
                <button className="btn" onClick={openModal}>
                    <i className="bi bi-file-earmark-x" style={{ color: "red" }}></i>
                </button>
            </li>
        </div>
    )
}

这里有一些结论:

  • showModal
    状态控制模态的可见性。如果
    showModal
    状态发生变化,则需要重新渲染其所有子组件(在我们的例子中是模态窗口);
  • 函数
    openModal
    closeModal
    handleApprove
    管理模态框的状态和操作。
© www.soinside.com 2019 - 2024. All rights reserved.