I have an app showing confirmation modal on delete.
Here is the full code:
https://codesandbox.io/s/vkz5xm8r0
In components/Modal.js I have some conditional render. What if I want to style the whole modal based on those conditions? What is the best way to do so?
Eg. how to style the whole modal so it changes appearance like so:
https://imgur.com/a/pK5Zu
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
回答1:
Reorganised the code a bit. I believe this makes the code cleaner and easier to style. And hopefully answers your question :)
// 'components/Modal.js'
import React from 'react';
import ReactLoading from 'react-loading';
class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
status: 'prompting' //'prompting', 'deleting', 'deleted'
};
}
removeUser = () => {
this.setState({ status: 'deleting' });
// simulate async loading action
setTimeout(
() =>
this.setState({
status: 'deleted'
}),
2000,
);
//simulate promise (function above then this below)
setTimeout(() => this.props.removeUser(this.props.data), 2001);
};
closeModal = () => {
this.props.closeModal();
this.setState({ status: 'prompting' });
};
render() {
const { id, name } = this.props.data;
const {status} = this.state;
// The gray background
const backdropStyle = {
position: 'fixed',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.3)',
padding: 50,
};
// The modal "window"
const modalStyle = {
backgroundColor: '#fff',
borderRadius: 3,
maxWidth: 400,
minHeight: 200,
margin: '0 auto',
padding: 30,
};
const modal = {
"prompting": (<div className="prompting">
<h5>You want to delete user {id} : {name}</h5>
<button onClick={this.removeUser}>Delete</button>
<button onClick={this.closeModal}>Cancel</button>
</div>
),
"deleting": (<div className="deleting">
<h5> Deleting </h5>
<div>
<ReactLoading type="spin" color="#444" />
</div>
</div>),
"deleted": (<div className="deleted">
<h5> Deleted </h5>
<button onClick={this.closeModal}>OK</button>
</div>)
};
if(this.props.displayModal){
return (
<div className="backdrop" style={backdropStyle}>
<div className="modal" style={modalStyle}>
{modal[status]}
</div>
</div>
);
}
else
return null;
}
}
export default Modal;