gpt4 book ai didi

javascript - 为什么单击关闭按钮时我的模式不关闭?

转载 作者:行者123 更新时间:2023-11-29 15:07:04 25 4
gpt4 key购买 nike

我碰壁了,不知道该怎么办。我只是想关闭我的 Bootstrap 模式,但它不会关闭。它可以正常打开,但又无法关闭。我已经尝试了很多方法来纠正这个问题,这篇文章没有足够的空间来列出我所有的尝试。

我做错了什么,我该如何解决?

这是 App.js:

import React, { Component } from 'react';
import Product from './Product';
import { ProductConsumer } from "../context";
import TitleBody from "./TitleBody";
import AboutButton from "./AboutButton";
import AboutButtonModal from "./AboutButtonModal";

export default class App extends Component {
constructor(props) {
console.log("Props - ", props);
super(props);
this.state = {
modalVisible: false
};
this.openModal = this.openModal.bind(this);
}

openModal() {
console.log("Open modal called ", this.state.modalVisible);
const modalVisible = !this.state.modalVisible;
this.setState({
modalVisible
}, console.log(this.state.modalVisible));
}

render() {
let styles = this.state.modalVisible
? { display: "block" }
: { display: "none" };
return (
<React.Fragment>
<div className="py-5">
<div className="container">
<TitleBody name="Welcome to" title="Cruskip"/>
<AboutButtonModal show={this.state.modalVisible} onClick={this.openModal} style={styles}/>
<AboutButton onClick={this.openModal}/>
</div>
</div>
</div>
</React.Fragment>
);
}
}

这是 AboutButtonModal.js:

import React from 'react';
import './AboutButtonModal.scss';

const Modal = ({ handleClose, show, children}, props) => {
const showHideClassname = show ? "modal display-block" : "modal display-none";

return(
<div className={showHideClassname} style={props.style}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button
type="button"
onClick={props.onClick}
className="close"
>
&times;
</button>
<h4 className="modal-title">Modal Header</h4>
</div>
<div className="modal-body">
<p>Some text in the modal.</p>
</div>
<div className="modal-footer">
<button
onClick={props.onClick}
type="button"
className="btn btn-default"
>
Close
</button>
</div>
</div>
</div>
</div>
);
};

export default Modal;

这是 AboutButton.js:

import React from 'react';
import './AboutButton.scss';

const AboutButton = (props) => {
return(
<div className="row">
<button className="about-btn" type="button" onClick={props.onClick}>
About Us
</button>
</div>
);
};

export default AboutButton;

最佳答案

如果您正在使用 ({ handleClose, show, children }, props),它不会让您访问 props onClick 函数..

所以要使用 props,只需应用 props 的对象析构......现在,你的代码将变成这样......

const Modal = ({ handleClose, show, children,...props})

关于javascript - 为什么单击关闭按钮时我的模式不关闭?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58869401/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com