gpt4 book ai didi

ReactJS 模态不使用 Materialize css 打开

转载 作者:行者123 更新时间:2023-12-05 03:03:59 24 4
gpt4 key购买 nike

我是 ReactJS 的新手,正在学习使用 Materialize css 创建模型。 https://materializecss.com

import React, { Component } from 'react';
import Modal from 'components/modal.jsx';

class Card extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
}
}
modalToggle = () => {
this.setState({modal: !this.state.modal})
console.log(this.state.modal);
}

render() {
return (
<div className="row">
<div className="col s12 m6" onClick={this.modalToggle}>
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">
Card Title
</span>
<p>
Hello I'm new card.
</p>
</div>
<div className="card-action">
<a href="#">Click Me</a>
<a href="#">Don't Click Me</a>
</div>
</div>
</div>
<Modal onClick={this.modalToggle} status={this.state.modal} />
</div>
);
}
}

ReactDom.render(<App />, document.getElementById('root'));

我的模态组件看起来像,

import React, { Component } from 'react';

class Modal extends Component {
render() {
return(
<div id="modal1" className="modal modal-fixed-footer">
<div className="modal-content">
<h4>Modal Title</h4>
<p>Description</p>
</div>
<div className="modal-footer">
<a href="#!" className="modal-close waves-effect waves-green btn-flat">
Click Me
</a>
</div>
</div>
);
}
}

export default Modal;

当卡片被点击时,我希望我的模态显示出来。为此,我创建了函数 modalToggle。有人可以指导我如何弹出模式。该代码运行完美,并且还打印了模态状态。我的代码有什么问题吗?

我知道对此的一种解决方案是 React-Materialize。我想在没有 React-materialize 的情况下弹出模态...有没有不使用 React-Materliaze 的解决方案。

我将不胜感激。

最佳答案

它也可以在 materializeCSS 中实现。为此,您需要执行 npm install materialize-css@next。在此之后,您需要在您的组件 JS 文件中导入 materialize-css。

要使用 Javascript materialize-css 组件,必须在 componentDidMount() 中引用这些组件,然后才能在 ref 中使用>.

CodeSandBox - Modal Working Demo

您可以从此存储库检查 React 中的其他 Materialize CSS 组件 - GermaVinsmoke - Reactize

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

class Modal extends Component {
componentDidMount() {
const options = {
onOpenStart: () => {
console.log("Open Start");
},
onOpenEnd: () => {
console.log("Open End");
},
onCloseStart: () => {
console.log("Close Start");
},
onCloseEnd: () => {
console.log("Close End");
},
inDuration: 250,
outDuration: 250,
opacity: 0.5,
dismissible: false,
startingTop: "4%",
endingTop: "10%"
};
M.Modal.init(this.Modal, options);
// If you want to work on instance of the Modal then you can use the below code snippet
// let instance = M.Modal.getInstance(this.Modal);
// instance.open();
// instance.close();
// instance.destroy();
}

render() {
return (
<>
<a
className="waves-effect waves-light btn modal-trigger"
data-target="modal1"
>
Modal
</a>

<div
ref={Modal => {
this.Modal = Modal;
}}
id="modal1"
className="modal"
>
{/* If you want Bottom Sheet Modal then add
bottom-sheet class */}
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#" class="modal-close waves-effect waves-red btn-flat">
Disagree
</a>
<a href="#" class="modal-close waves-effect waves-green btn-flat">
Agree
</a>
</div>
</div>
</>
);
}
}

export default Modal;

关于ReactJS 模态不使用 Materialize css 打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53345945/

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