我想在单击 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">×</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>
);
}
}
当我点击“登录/注册”按钮时，没有任何显示。但此消息出现在我的终端上：“显示模态测试”。 除此之外，我的终端没有任何错误
您所面临的模式未在 React 组件中打开的问题是因为您尝试使用
data-toggledata-targetJavaScript approach which manipulates the DOM directlyReact 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>
)
}
这里有一些结论：
showModalshowModalopenModalcloseModalhandleApprove