ReactJS modal not opening using Materialize css

问题:

I am new to ReactJS & learning to create model using 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'));

And my Modal Component looks like,

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;

When the card get clicked I want my modal show up. For that I have created function modalToggle. Can someone please guide me how to make the modal pop up. The code is running perfectly and also printing the state of modal. Is there anything wrong with my code.

I know that one solution to this is React-Materialize. I want to pop modal without React-materialize ... Is there any solution without using the React-Materliaze.

I would appreciate the help.

回答1:

It can be implemented in materializeCSS also. For this you need to do npm install materialize-css@next. After this, you need to import the materialize-css in your component JS file.

To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount() has to be made and then it can be used in ref.

CodeSandBox - Modal Working Demo

You can check other Materialize CSS components in React from this repository - 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;