我是 ReactJS 的新手,正在学习使用 Materialise css 创建模型。https://materializecss.com 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 - 模态工作演示 https://codesandbox.io/s/48w3kw6klw
您可以从此存储库中检查 React 中的其他 Materialise CSS 组件 -GermaVinsmoke - 反应 https://github.com/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;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)