无法使用Materialize CSS打开ReactJS模式 [英] ReactJS modal not opening using Materialize css

问题描述

我是ReactJS&的新手.学习使用Materialize CSS创建模型. https://materializecss.com

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'));

我的模态组件看起来像

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函数.有人可以指导我如何使模式弹出.该代码可以完美运行，并且还可以打印模式状态.我的代码有什么问题吗?

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.

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

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.

我将很感谢您的帮助.

推荐答案

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

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.

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

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-模态工作演示

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

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;

这篇关于无法使用Materialize CSS打开ReactJS模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！