ReactJS 模态作为组件

Question

如何使用 Reactjs 创建模式？我只是使用 Bootstrap 模态中的 CSS（没有 JS）。

我已经创建了一个模态组件：

import React from 'react';

class Modal extends React.Component {
    constructor() {
        super();
    }

    componentWillMount() {
        this.setState({
            open: false
        })
    }

    onClick() {
        this.setState({
            open: !this.state.open
        })
    }

    render() {
        return (
            <div class="modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">{this.props.title}</h4>
                        </div>
                        <div class="modal-body">
                            {this.props.children}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Modal;

我想以某种方式从这里调用它：

import React from 'react';
import UrgencyToggle from './UrgencyToggle';
import ApproveButton from './ApproveButton';
import ShippingTable from './ShippingTable';
import DropdownButtonList from '../global/DropdownButtonList';
import Modal from '../global/Modal';

export default class Job extends React.Component {
    setUrgency(urgency) {
        actionContext.dispatch('SET_JOB_URGENCY', { data: urgency})
    };
    changeTrader(e) {

    }
    changeOft() {

    }
    render() {
        return (
<div className="row users">
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">Trader</span>
                                        <span className="name">{this.props.job.user_name}<img
                                            src="/images/system-icons/pencil.png" width="13"
                                            onClick={this.changeTrader}
                                            title="Change which trader owns this job."/></span>
                                </div>
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">CEX</span>
                                        <span
                                            className="name">{this.props.job.cex_user_name ? this.props.job.cex_user_name : 'None assigned'}</span>

                                </div>
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">OFT</span>
                                        <span
                                            className="name">{this.props.job.oft_user_name ? this.props.job.oft_user_name : 'None assigned'}<img
                                            title="Set the OFT user for this job." src="/images/system-icons/pencil.png"
                                            onClick={this.changeOft}
                                            width="13"/></span>
                                </div>
                            </div>
               )
    }
};

---

模态：

import React from 'react';

class Modal extends React.Component {
    constructor() {
        super();
    }

    render() {
        let open = this.props.open;
        return (
            <div className={'modal fade'+(open ? '' : 'hide')} tabindex="-1" role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 className="modal-title">{this.props.title}</h4>
                        </div>
                        <div className="modal-body">
                            {this.props.children}
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" className="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Modal;

工作：

    import React from 'react';
    import UrgencyToggle from './UrgencyToggle';
    import ApproveButton from './ApproveButton';
    import ShippingTable from './ShippingTable';
    import DropdownButtonList from '../global/DropdownButtonList';
    import Modal from '../global/Modal';

    export default class Job extends React.Component {
        constructor(props) {
            super(props);
            this.toggleModal = this.toggleModal.bind(this);
            this.state = {open: false}
        }

        setUrgency(urgency) {
            actionContext.dispatch('SET_JOB_URGENCY', { data: urgency})
        };
        toggleModal() {
            this.setState({
                open: this.state.modal
            });
        }
        render() {
            return (
<div className="row users">
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">Trader</span>
                                        <span className="name">{this.props.job.user_name}<img
                                            src="/images/system-icons/pencil.png" width="13"
                                            onClick={this.toggleModal}
                                            title="Change which trader owns this job."/></span>
                                </div>
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">CEX</span>
                                        <span
                                            className="name">{this.props.job.cex_user_name ? this.props.job.cex_user_name : 'None assigned'}</span>

                                </div>
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">OFT</span>
                                        <span
                                            className="name">{this.props.job.oft_user_name ? this.props.job.oft_user_name : 'None assigned'}<img
                                            title="Set the OFT user for this job." src="/images/system-icons/pencil.png"
                                            onClick={this.toggleModal}
                                            width="13"/></span>
                                </div>
                            </div>
            )
        }
    };

Answer 1

从父组件Job 控制您的Modal 的状态。激活/停用Modal 的调用函数也应该位于父Job 组件内。

export class Modal extends React.Component {
  // this.props.open holds the value whether the modal is open or not
  // this.props.toggleModal holds the function for opening/closing modal

  render() {
    let open = this.props.open;
    // return JSX
  }
}

在您的工作组件中，将this.state.open 和this.toggleModal 函数作为道具传递给Modal 组件。

export default class Job extends React.Component {

  constructor(props) {
    super(props);
    this.toggleModal = this.toggleModal.bind(this);
    this.state = {
      open: false,
    }
  }

  toggleModal() {
    this.setState({
      open: this.state.modal,
    });
  }

  render() {
    return (
      <div>
        {/* your JSX */}
        <Modal open={this.state.open} toggleModal={this.toggleModal} />
      </div>
    )
  }
}

Answer 2

您也可以使用它来声明您的默认道具，因为您使用的是一个

静态 propTypes = { 打开：PropTypes.bool， };

静态默认属性 = { open: false //默认 };