1. ReactDOM.createPortal 创建modal RModal
import React from 'react';
import ReactDOM from 'react-dom';
// css & img
import styles from './index.module.less';
import popoverIcon from '@/assets/img/common/popover.svg';
import popoverCloseIcon from '@/assets/img/common/popoverClose.svg';
// 公共组件
import RButton from '@/components/RButton';
class RModal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
this.el.className = styles.rmodal;
}
appendChild = () => {
const modalRoot = document.getElementById('modal-root');
modalRoot.appendChild(this.el);
}
removeChild = () => {
const modalRoot = document.getElementById('modal-root');
modalRoot && modalRoot.removeChild(this.el);
}
onClicClosePopoverModal = () => {
const { onCancel } = this.props;
onCancel();
}
componentWillUnmount() {
this.removeChild();
}
render() {
const { title, visible, onOk} = this.props;
if (!visible) {
return '';
}
this.appendChild();
return ReactDOM.createPortal(
<div className={styles.rmodal_content}>
<div className={styles.rmodal_title}>
<span>
<img className={styles.rmodal_img} src={popoverIcon} alt="" />
{title}
</span>
<span>
<img
onClick={this.onClicClosePopoverModal}
className={styles.rmodal_img}
src={popoverCloseIcon}
alt=""
/>
</span>
</div>
<div className={styles.rmodal_body}>
{this.props.children}
</div>
<div className={styles.rmodal_footer}>
<RButton onClick={this.onClicClosePopoverModal} shape="circle">取消</RButton>
<RButton onClick={onOk} type="primary" shape="circle">确定</RButton>
</div>
</div>,
this.el,
);
}
}
export default RModal;
2. RModal使用ant design form创建表单
import React, { PureComponent } from 'react';
import { Form, Input, DatePicker } from 'antd';
// 公共组件
import RModal from '@/components/RModal';
// service
import { inertShareAction } from '@/service/share';
const FormItem = Form.Item;
@Form.create()
class Create extends React.PureComponent {
constructor(props) {
super(props);
this.state = {};
}
onHandler = () => {
const { form, callBack } = this.props;
form.validateFields((err, fieldsValue) => {
if (err) return;
inertShareAction(fieldsValue)
.then(res => {
if (res.code === 200 ) {
callBack();
}
})
.catch(err => {
debugger
})
});
}
render() {
const { visible, handleModalPopover, form } = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
};
return (
<RModal
title="添加分享条目"
visible={visible}
onOk={this.onHandler}
onCancel={() => {handleModalPopover(false);}}
>
<br />
<Form {...formItemLayout} hideRequiredMark style={{ textAlign: 'left' }}>
{/* 分享主题 */}
<FormItem label="分享主题">
{form.getFieldDecorator('title', {
rules: [
{ required: true},
{
max: 50,
message: '最大不超过50',
},
],
validateTrigger: 'onChange',
})(
<Input
autoComplete="off"
placeholder="分享主题"
/>
)}
</FormItem>
{/* 分享人 */}
<FormItem label="分享人">
{form.getFieldDecorator('author', {
rules: [
{ required: true},
{
max: 50,
message: '最大不超过50',
},
],
validateTrigger: 'onChange',
})(
<Input
placeholder="分享人"
/>
)}
</FormItem>
{/* 分享日期 */}
<FormItem label="分享日期">
{form.getFieldDecorator('share_date', {
rules: [
],
validateTrigger: 'onChange',
})(
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
)}
</FormItem>
</Form>
</RModal>
);
}
}
问题
当前form表单内容输入一个单词之后就会失去焦点，RModal在每一次input输入之后都会重新渲染，这种问题如何处理？
