createPortal 和 ant design form的问题

[rodchen-king]

环境

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> &nbsp;&nbsp;
          <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>
    );
  }
}

export default Create;

问题

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

[ant-design-bot]

Hello @rodchen-king, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

你好 @rodchen-king，为了能够进行高效沟通，我们对 issue 有一定的格式要求，你的 issue 因为不符合要求而被自动关闭。你可以通过 issue 助手 来创建 issue 以方便我们定位错误。谢谢配合！

[yoyo837]

这是有业务需要rerender，比如涉及到动画啊，样式啊，什么的。很正常呀。

[rodchen-king]

这是有业务需要rerender，比如涉及到动画啊，样式啊，什么的。很正常呀。

但是这样的话，无法连续性输入内容了啊

[yoyo837]

你自己打debugger的呀

[rodchen-king]

你自己打debugger的呀

我打debug只是为了说明会重新渲染，不打debug的情况下，input输入还是每次只能输入一个字符，然后input就失去光标

[yoyo837]

提供在线的复现demo看看

[rodchen-king]

代码的原因，修复了。谢谢 @yoyo837

[JowayYoung]

@rodchen-king 我也遇上这个问题，请问是如何修复的