ReactJS modal没有使用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-materialize 的情况下弹出模态...有没有不使用 React-Materliaze 的解决方案。

我将不胜感激。

Answer 1

它也可以在 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;