createPortal & rc-form problem

Code

ReactDOM.createPortal create 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> &nbsp;&nbsp;
          <RButton onClick={onOk} type="primary" shape="circle">确定</RButton>
        </div>
      </div>,
      this.el,
    );
  }
}

export default RModal;

RModal use 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>
);

} }

export default Create;



### Question
english: input one key and then input element will onblur，RModal render once again after input one key, but it's not i want, how can i do to aviod the case?

chinese: 当前form表单内容输入一个单词之后就会失去焦点，RModal在每一次input输入之后都会重新渲染，这种问题如何处理？

![1](https://user-images.githubusercontent.com/19780441/65677227-d0cdda00-e083-11e9-8e86-d47dbed0f243.gif)

react-component / form

createPortal & rc-form problem #343

Code