模态未使用物化 css 在 React 中加载

Question

我是 React 的新手，我正在尝试使用 materialize.css http://materializecss.com 创建一个模式

我的登录页面如下所示

import React from 'react';
var Modal=require('Modal');

class login extends React.Component{
constructor(props){
    super(props);
    this.state={
        view: {showModal: false}
    }
    this.handleHideModal=this.handleHideModal.bind(this);
    this.handleShowModal=this.handleShowModal.bind(this);

}
handleHideModal(){
    this.setState({view: {showModal: false}})
}
handleShowModal(){
    $('#modal1').modal('open');
}
componentDidMount(){
    $('#modal1').modal('open');
}
render(){
return(
    <div>
        <div className="login">
            <div className="">
                <div className="input-field col s8">
                    <i className="material-icons prefix">account_circle</i>
                    <input  id="username" type="text" className="validate"/>
                    <label htmlFor="username">User Name</label>
                </div>
                <div className="input-field col s8">
                    <i className="material-icons prefix">vpn_key</i>
                    <input id="password" type="password" className="validate"/>
                    <label htmlFor="password">Password</label>
                </div>
                <div className="center input-field col s6">
                        <input type="checkbox" className="filled-in" id="filled-in-box" defaultChecked="checked" />
                        <label htmlFor="filled-in-box">Remember me</label>
                </div>
                <div className="center input-field col s12">
                    <a className="login-button waves-effect waves-light btn center">Login</a>
                </div>
                <div className="row input-field col s12">
                    <div className="col s6 left-align">
                        <a className="modal-trigger " onClick={this.handleShowModal} >Register Now</a>
                    </div>
                    <div className="col s6 right-align">
                        <a>Forgot Password?</a>
                    </div>
                </div>
            </div>
        </div>
        {this.state.view.showModal ? <Modal handleHideModal={this.handleHideModal}/>:null}
    </div>
);
}
};

module.exports= login;

我的模态组件看起来像这样。

import React from 'react';
import ReactDOM from 'react-dom';

class Modal extends React.Component{
componentDidMount(){
    //var modal = new Foundation.Reveal($('#modal1'));
    //modal.open();
    $('#modal1').open();
    $(ReactDOM.findDOMNode('#modal1')).modal('show');
    //$(ReactDOM.findDOMNode(this)).on('hidden.bs.modal', this.props.handleHideModal);
}
render(){
    return(
        <div id="modal1" className="modal">
            <div className="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
            </div>
            <div className="modal-footer">
                <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
            </div>
        </div>
    );
}
propTypes:{
    handleHideModal: React.PropTypes.func.isRequired
}
};

module.exports = Modal;

我尝试了很多在互联网上找到的建议，但都没有成功。我不明白问题是什么。

Answer 1

使用 React Materialize

安装：

npm install react-materialize

进口：

import {Modal, Button, Icon} from 'react-materialize'

代码：

<Modal
  header='Modal Header'
  trigger={<Button waves='light'>OR ME!<Icon right>insert_chart</Icon></Button>}>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</Modal>

来源：https://react-materialize.github.io/#/

Answer 2

在 React 中，您不应该通过 document.getElementById 或通过 querySelector（或您的类似 jQuery 的 $ 函数）直接访问元素。 Facebook 正在https://facebook.github.io/react/docs/refs-and-the-dom.html 解决这个问题

但要回答您的问题，我建议将行为更改为以下内容：

import React from 'react';
var Modal=require('Modal');

class login extends React.Component{
constructor(props){
    super(props);
    this.state={
        view: {showModal: false}
    }
    this.handleHideModal=this.handleHideModal.bind(this);
    this.handleShowModal=this.handleShowModal.bind(this);

}
handleHideModal(){
    this.setState({view: {showModal: false}})
}
handleShowModal(){
    this.setState({view: {showModal: true}})
}

render(){
return(
    <div>
        <div className="login">
            <div className="">
                <div className="input-field col s8">
                    <i className="material-icons prefix">account_circle</i>
                    <input  id="username" type="text" className="validate"/>
                    <label htmlFor="username">User Name</label>
                </div>
                <div className="input-field col s8">
                    <i className="material-icons prefix">vpn_key</i>
                    <input id="password" type="password" className="validate"/>
                    <label htmlFor="password">Password</label>
                </div>
                <div className="center input-field col s6">
                        <input type="checkbox" className="filled-in" id="filled-in-box" defaultChecked="checked" />
                        <label htmlFor="filled-in-box">Remember me</label>
                </div>
                <div className="center input-field col s12">
                    <a className="login-button waves-effect waves-light btn center">Login</a>
                </div>
                <div className="row input-field col s12">
                    <div className="col s6 left-align">
                        <a className="modal-trigger " onClick={this.handleShowModal} >Register Now</a>
                    </div>
                    <div className="col s6 right-align">
                        <a>Forgot Password?</a>
                    </div>
                </div>
            </div>
        </div>
        <Modal handleHideModal={this.handleHideModal} show={this.state.view.showModal}/>
    </div>
);
}
};

module.exports= login;

对于模态组件，您需要对我们传递的 show 属性做出反应：

import React from 'react';

class Modal extends React.Component{

render(){
    return(
        <div id="modal1" className={this.props.show ? 'modal open' : 'modal'}>
            <div className="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
            </div>
            <div className="modal-footer">
                <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
            </div>
        </div>
    );
}
propTypes:{
    handleHideModal: React.PropTypes.func.isRequired,
    show: React.PropTypes.bool.isRequired,
}
};

module.exports = Modal;

我不知道模态组件的渲染方法中的“模态打开”css 部分是否是在 CSS 框架中打开此模态窗口的正确类名，但我想你明白了。

编辑：如果将类更改为单独打开不起作用，您应该考虑添加一个像这样的 materialize css 的反应实现：https://github.com/react-materialize/react-materialize。

在那里添加一个模态就像这样简单：https://react-materialize.github.io/modals.html

您只需要将模态框放入模态框组件中：

import React from 'react';
import { Modal } from 'react-materialize';

class Modal extends React.Component{

render(){
    return(
        <Modal
          header='Modal Header'
          trigger={
            <Button waves='light'>MODAL</Button>
          }>
          <p>Lorem ipsum dolor sit amet</p>
        </Modal>
    );
}
propTypes:{
    handleHideModal: React.PropTypes.func.isRequired,
    show: React.PropTypes.bool.isRequired,
}
};

module.exports = Modal;