[英]ReactJS Modal as component
How do I create a modal using Reactjs? 如何使用Reactjs创建模式? I am just using the CSS from Bootstrap's modal (none of the JS). 我只是使用Bootstrap模态中的CSS(没有JS)。
I have created a modal component: 我创建了一个模态组件:
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">×</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;
I want to call it from in here somehow: 我想以某种方式从这里调用它:
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>
)
}
};
Modal: 莫代尔:
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">×</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;
Job: 工作:
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>
)
}
};
Control your Modal
's state from the parent component Job
. 通过父组件Job
控制Modal
的状态。 The calling function which activates/deactivates the Modal
should also lie inside the parent Job
component. 激活/禁用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
}
}
Inside your job component, pass this.state.open
and this.toggleModal
function as props to Modal
Component. 在工作组件内部,传递this.state.open
和this.toggleModal
函数作为Modal
Component的道具。
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>
)
}
}
You can also use this to declare your default props, since you are using one 您还可以使用它来声明默认道具,因为您正在使用一个
static propTypes = { open: PropTypes.bool, }; 静态propTypes = {open:PropTypes.bool,};
static defaultProps = { open: false //default }; 静态defaultProps = {open:false // default};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.