使用React.js显示/隐藏模态不起作用

时间:2016-05-03 01:16:48

标签: reactjs

这是我的模态组件:

'use strict';

import React from 'react';

const Modal = React.createClass({
    handleOverlayClick () {
        this.setState({ showModal: false });
    },

    shouldComponentUpdate (newProps, newState) {
        return newState.showModal !== this.props.showModal;
    },

    render () {
        const style = {
            display: (this.props.showModal) ? 'block' : 'none'
        };

        console.log(style);

        return (
            <div className="modal-overlay" style={style}>
                <div className="modal-container" onClick={this.handleOverlayClick}>
                    <div className="modal-content modal-input">Hello, world</div>
                </div>
            </div>
        );
    }
});

module.exports = Modal;

这就是我所说的:

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import SplitButton from './split-button';
import EmmaButton from './emma-button';
import SelectEmailModal from './modals/email-select.modal';

const AddActionBtn = React.createClass({

    onClick () {
        return "#";
    },

    handleSendMailing () {
        return ReactDOM.render(<SelectEmailModal showModal={true} />, document.getElementById('modals'));
    },

    handleWait() {
        console.log("WAIT");
        return "#";
    },

    render () {
        return (
            <SplitButton primaryLabel="ADD ACTION &#9660;" primaryAction={this.onClick}>
                <ul>
                    <li><span onClick={this.handleSendMailing}>Send mailing</span></li>
                    <li><span onClick={this.handleWait}>Wait</span></li>
                </ul>
            </SplitButton>
        );
    }
});

module.exports = AddActionBtn;

我是React的新手,请原谅我的无知。只想简单地显示/隐藏模态

1 个答案:

答案 0 :(得分:2)

也许错误在这里?
display: (this.props.showModal) ? 'block' : 'none'

showModal是一个州,而不是道具,所以: this.state.showModal