antd+ts 表单元素（select和datepicker）获得光标会有概率出现页面丢失响应

Question

antd+ts 表单元素（select和datepicker）获得光标会有概率出现页面丢失响应

代码如下

import { Col, DatePicker, Form, Input, Modal, Row, TreeSelect } from "antd";
import * as moment from "moment";
import { useEffect, useState } from "react";
import { onSuccess } from "../../../config/api/default.call";
import {
  addGood,
  getBrandList,
  getCategoryList,
  getSupplierList,
  updGood
} from "../../../config/api/good.api";
import {
  goodCategory,
  goodState,
  selectTreeProps
} from "../../../config/tableColumns/good";

const App = (props: any) => {
  const [form] = Form.useForm();
  const [selectOption, setSelectOption] = useState({
    // BusinessId: localStorage.getItem("bid"),
    PageSize: 100,
    PageIndex: 1,
  });
  const [category, setCategory] = useState(Array<goodCategory>());
  const [brand, setBrand] = useState(Array<goodCategory>());
  const [sup, setSup] = useState(Array<goodCategory>());
  const onCancel = () => {
    props.hide();
  };
  const onOk = () => {
    form.submit();
  };

  const onFinish = (values: any) => {
    if (props.data.id) {
      updGood({ model: { id: props.data.id, ...values } }).then((r) => {
        if (r.isSuccess) {
          onSuccess(props, "修改成功!");
        }
      });
    } else {
      addGood({ model: values }).then((r) => {
        if (r.isSuccess) {
          onSuccess(props, "添加成功!");
        }
      });
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  useEffect(() => {
    console.log("11111111111111111");
    if (props.data.id) {
      props.data.marketTime = moment.default(props.data.marketTime);
      form.setFieldsValue(props.data);
    } else {
      form.resetFields();
    }
  }, [props.data.id]);

  useEffect(() => {
    getCategoryList({ model: selectOption }).then((r) => {
      setCategory(r.data);
    });
    getBrandList({ model: selectOption }).then((r) => {
      setBrand(r.data);
    });
    getSupplierList({ model: selectOption }).then((r) => {
      setSup(r.data);
    });
  }, []);
  return (
    <Modal
      title="新增/编辑商品"
      visible={props.visible}
      destroyOnClose={true}
      onOk={onOk}
      onCancel={onCancel}
      okText="确认"
      cancelText="取消"
    >
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{}}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        form={form}
      >
        <Row>
          <Col span={12}>
            <Form.Item
              label="名称"
              name="name"
              rules={[{ required: true, message: "请输入商品名词!" }]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="编号"
              name="code"
              rules={[{ required: true, message: "请输入商品编号!" }]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="typeId"
              label="类型"
              rules={[{ required: true, message: "请选择商品类型!" }]}
            >
              <TreeSelect
                showSearch
                fieldNames={selectTreeProps}
                placeholder="请选择商品类型"
                treeData={category}
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="brandId"
              label="品牌"
              rules={[{ required: true, message: "请选择商品品牌!" }]}
            >
              <TreeSelect
                showSearch
                fieldNames={selectTreeProps}
                placeholder="请选择商品品牌"
                treeData={brand}
                allowClear
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="supplierId"
              label="供应商"
              rules={[{ required: true, message: "请选择供应商!" }]}
            >
              <TreeSelect
                showSearch
                fieldNames={selectTreeProps}
                placeholder="请选择商品供应商"
                treeData={sup}
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="marketTime" label="上市时间">
              <DatePicker style={{ width: "100%" }} />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="state"
              label="状态"
              rules={[{ required: true, message: "请选择供状态!" }]}
            >
              <TreeSelect
                showSearch
                fieldNames={selectTreeProps}
                placeholder="请选择商品状态"
                treeData={goodState}
                allowClear
                defaultValue="1"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="keyWord" label="关键字">
              <Input />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default App;

无报错/无异常提示，获得光标也不会远程载入数据

目前无思路

希望解决：表单元素获得光标不出现页面丢失响应

Answer 1

获 得 光 标 会 有 概 率 出 现 页 面 丢 失 响 应 ?是选择的时候整个页面没有响应，还是选择的时候下拉框没有出现？