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

您可以从此存储库-GermaVinsmoke - Reactize

中查看React中的其他Materialise CSS组件

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模式

1 个答案: