ReactJS模态未使用Materialize-css打开

Question

我是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的情况下流行模态。。。如果不使用React Materiaze，有什么解决方案吗。

我将感谢你的帮助。

Answer 1

它也可以在物化CSS中实现。为此，您需要执行npm install materialize-css@next。在此之后，您需要在组件JS文件中导入实体化css。

要使用Javascript实体化css组件，必须在componentDidMount()中引用这些组件，然后才能在ref中使用。

CodeSandBox-模式工作演示

您可以从这个存储库检查React中的其他Materialize CSS组件-GermanVinsmoke-Reaze

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;