react粘贴图片上传的尝试，没完成，有bug，删除之后，粘贴会失效，不知道为什么

最新推荐文章于 2026-06-30 13:17:50 发布
原创 最新推荐文章于 2026-06-30 13:17:50 发布 · 564 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
这是一个用于创建和编辑缺陷信息的React组件，包括弹出框的显示控制、字段验证、数据初始化、事件处理等。组件中包含了各种表单元素如Select、Input、DatePicker等，用于收集如缺陷标题、所属系统、被测模块、优先级等信息。组件还支持文件上传、图片处理和粘贴图片功能，并提供了日期选择器。数据提交前会进行表单验证，并调用后台接口处理数据。 
/**
 * 新增缺陷弹出框
 */
"use strict";
import "./index.less";
import React, { Component } from "react";
import { message } from "edspUI";
import moment from "moment";
import {
  InfoCircleOutlined,
  FolderOutlined,
  CopyFilled,
  VerticalAlignBottomOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import { Language } from "Utils";
import {
  Modal,
  Select,
  Tooltip,
  Icon,
  Form,
  Input,
  Button,
  Checkbox,
  DatePicker,
} from "antd";
import { jiraService, jiraService1 } from "Services";
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
//资源国际化
const i18n = Language.getLanguage("jira");
class AddIssueModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: this.props.showModal, //是否显示弹出框
      text: "支持多文件同时上传", //tooltip提示框文字
      fileList: [],
      defectTitle: "",
      creatorName: "", //创建人姓名
      creatorId: "", //创建人id
      systemInfoIdList: [], // 被测系统列表
      moduleInfoIdList: [], // 被测模块列表
      selTradeList: [], // 交易信息列表
      selWindowList: [], // 目标版本列表
      currenetSystemId: "",
      timeNow: "",

      moduleInfoIdList1: [], // 被测模块列表
      selTradeList1: [], // 交易信息列表
      currenetSystemId1: "",

      baseImgArr: [], //base64图片列表
      imgFileList: [], //base64图片文件列表
    };
  }

  componentWillMount() {
    this.refresh();
    this.setState((state) => ({
      creatorName: JSON.parse(localStorage.getItem("user_claims")).relnam,
    }));
    this.selPersonByName();
    this.selAllSysName();
    this.selWindow();
    // 为所属开发项目 表单赋初始值 738
    // this.props.form.projectDevId = 738;
    // 为所属测试组 表单赋初始值 接口自动化测试组
    // this.props.form.groupId = "接口自动化测试组";
  }
  componentDidMount() {}
  refresh() {}
  // 获取人员信息
  selPersonByName = () => {
    let params = {
      input: {},
      sys: {
        prcscd: "selPersonByName",
      },
    };
    params.input.person_name = JSON.parse(
      localStorage.getItem("user_claims")
    ).relnam;
    params.input.tentid = localStorage.getItem("TENTID");
    let that = this;
    //新增和修改
    jiraService.selPersonByName(params, function (res) {
      //S表示成功
      if (res.sys.status == "S") {
        if (res.output.issuce == "true") {
          // 成功了就打印下看看
          // that.props.form.bugCreator = res.output.person.id;
          // that.props.form.setFieldsValue({ bugCreator: res.output.person.id });
          that.setState({
            creatorId: res.output.person.id, //res.output.person.id
          });
        } else {
          message.error(res.output.mesage);
        }
      } else {
        message.error(res.sys.erortx);
      }
    });
  };
  // 获取所有系统信息
  selAllSysName = () => {
    let params = {
      input: {},
      sys: {
        prcscd: "selAllSysName",
      },
    };
    params.input.tentid = localStorage.getItem("TENTID");
    let that = this;
    //新增和修改
    jiraService.selAllSysName(params, function (res) {
      //S表示成功
      if (res.sys.status == "S") {
        if (res.output.issuce == "true") {
          let arr = res.output.sysname.map((el) => ({
            value: el.sys_name,
            id: el.sys_no,
          }));
          that.setState((state) => {
            return {
              systemInfoIdList: arr.concat(),
            };
          });
        } else {
          message.error(res.output.mesage);
        }
      } else {
        message.error(res.sys.erortx);
      }
    });
  };
  // 获取目标版本
  selWindow = () => {
    let params = {
      input: {},
      sys: {
        prcscd: "selWindow",
      },
    };
    params.input.tentid = localStorage.getItem("TENTID");
    let that = this;
    //新增和修改
    jiraService.selWindow(params, function (res) {
      //S表示成功
      if (res.sys.status == "S") {
        if (res.output.issuce == "true") {
          let arr = res.output.windowlist.map((el) => ({
            value: el.window_name,
            id: el.id,
          }));
          that.setState((state) => {
            return {
              selWindowList: arr.concat(),
            };
          });
        } else {
          message.error(res.output.mesage);
        }
      } else {
        message.error(res.sys.erortx);
      }
    });
  };
  // 获取被测模块 传选的被测系统的id
  selModuBySysid = (id, type) => {
    if (type == "belong") {
      this.props.form.setFieldsValue({ bugGmodule: "" });
      this.props.form.setFieldsValue({ bugGtrade: "" });
      this.setState({
        moduleInfoIdList1: [],
        selTradeList1: [],
        currenetSystemId1: id,
      });
    } else if (type == "beTested") {
      this.props.form.setFieldsValue({ moduleInfoId: "" });
      this.props.form.setFieldsValue({ bugSystemfunction: "" });
      this.setState({
        moduleInfoIdList: [],
        selTradeList: [],
        currenetSystemId: id,
      });
    }

    let params = {
      input: { id },
      sys: {
        prcscd: "selModuBySysid",
      },
    };
    params.input.tentid = localStorage.getItem("TENTID");
    let that = this;
    //新增和修改
    jiraService.selModuBySysid(params, function (res) {
      //S表示成功
      if (res.sys.status == "S") {
        if (res.output.issuce == "true") {
          let arr = res.output.module_name.map((el) => ({
            value: el.module_name,
          }));
          if (type == "belong") {
            that.setState((state) => {
              return {
                moduleInfoIdList1: arr.concat(),
              };
            });
          } else if (type == "beTested") {
            that.setState((state) => {
              return {
                moduleInfoIdList: arr.concat(),
              };
            });
          }
        } else {
          message.error(res.output.mesage);
        }
      } else {
        message.error(res.sys.erortx);
      }
    });
  };
  // 获取被测模块 传选的被测系统的id 被测模块的value
  selTradeByModu = (module_name, type) => {
    let params = {
      input: { system_info_id: this.state.currenetSystemId, module_name },
      sys: {
        prcscd: "selTradeByModu",
      },
    };
    params.input.tentid = localStorage.getItem("TENTID");
    let that = this;
    //新增和修改
    jiraService.selTradeByModu(params, function (res) {
      //S表示成功
      if (res.sys.status == "S") {
        if (res.output.issuce == "true") {
          let arr = res.output.trade.map((el) => ({
            id: el.id,
            value: el.trade_name,
          }));
          if (type == "belong") {
            that.setState((state) => {
              return {
                selTradeList1: arr.concat(),
              };
            });
          } else if (type == "beTested") {
            that.setState((state) => {
              return {
                selTradeList: arr.concat(),
              };
            });
          }
        } else {
          message.error(res.output.mesage);
        }
      } else {
        message.error(res.sys.erortx);
      }
    });
  };
  pasteImg = (e) => {
    e.preventDefault();
    //正式
    let blob = null;
    if (e.clipboardData || e.originalEvent) {
      let clipboardData = e.clipboardData || e.originalEvent.clipboardData;
      if (clipboardData.items) {
        let items = clipboardData.items;
        let len = items.length;
        // 循环拿到所有图片文件  至于选择文件就另外放到一个list里吧，
        // 就不展示出来了，要不还是展示出来吧，不过展示在那下面比较好 嗯嗯
        // 如果是图片就添加到上面去，其他文件就放下面
        for (let i = 0; i < len; i++) {
          if (items[i].type.includes("image")) {
            blob = items[i].getAsFile();
            // this.setState((state) => ({
            //   fileList: [...state.fileList, blob],
            // }));
            // 这里做个判断，提示不能大于2m
            const isLt2M = blob.size / 1024 / 1024 < 0.5;
            if (isLt2M) {
              this.setState((state) => ({
                imgFileList: [...state.imgFileList, blob],
              }));
              // 将图片弄为base64来渲染
              let reader = new FileReader();
              reader.readAsDataURL(blob);
              let that = this;
              reader.onload = function (res) {
                if (res.target.result) {
                  let newObj = {
                    index: new Date().getTime(),
                    base64: res.target.result,
                  };
                  that.setState((state) => ({
                    baseImgArr: [...state.baseImgArr, newObj],
                  }));
                }
              };
            } else {
              message.error("上传图片大小不能超过500kb");
            }
          }
        }
      }
    }
  };
  handleTitle = (e) => {
    if (!e.target.value) {
      return;
    }
    this.setState({
      defectTitle: e.target.value,
    });
  };
  // 选择文件时吧文件放进列表渲染
  handleFileChange = (e) => {
    for (let file of e.target.files) {
      let fd = new FormData();
      fd.append("file", file);
      this.setState((state) => ({
        fileList: [...state.fileList, file],
      }));
    }
  };
  // 删除图片
  delFile = (file) => {
    this.setState((state) => {
      // 真没想到indexOf可以根据file来找。。。。之前都只能找单层的数组
      const index = state.fileList.indexOf(file);
      const newFileList = state.fileList.slice();
      newFileList.splice(index, 1);
      return {
        fileList: newFileList,
      };
    });
  };
  // 上面粘贴删除图片
  handleImgrRemove = (index) => {
    let theIndex = this.state.baseImgArr.findIndex((el) => el.index == index);
    let newArr = this.state.baseImgArr.concat();
    newArr.splice(theIndex, 1);
    this.setState((state) => ({
      baseImgArr: [...newArr],
    }));
  };
  // 下载图片
  // downFile = (file) => {
  //   const image = new Image();
  //   // 解决跨域 canvas 污染问题
  //   image.setAttribute("crossOrigin", "anonymous");
  //   image.onload = function () {
  //     const canvas = document.createElement("canvas");
  //     canvas.width = image.width;
  //     canvas.height = image.height;
  //     const context = canvas.getContext("2d");
  //     context.drawImage(image, 0, 0, image.width, image.height);
  //     //得到图片的base64编码数据
  //     const url = canvas.toDataURL("image/png");
  //     // 生成一个 a 标签
  //     const a = document.createElement("a");
  //     // 创建一个点击事件
  //     const event = new MouseEvent("click");
  //     // 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
  //     a.download = file.name || "图片";
  //     // 将生成的 URL 设置为 a.href 属性
  //     a.href = url;
  //     // 触发 a 的点击事件
  //     a.dispatchEvent(event);
  //     // return a;
  //   };
  //   let reader = new FileReader();
  //   reader.readAsDataURL(file);
  //   reader.onload = function (res) {
  //     if (res.target.result) {
  //       image.src = res.target.result;
  //     }
  //   };
  // };
  // 下载图片和文件
  downFile = (file) => {
    let a = document.createElement("a");
    let url = window.URL.createObjectURL(file);
    a.href = url;
    a.download = file.name;
    a.click();
    window.URL.revokeObjectURL(url);
  };
  //文本聚焦
  focus = () => {
    // 直接使用原生 API 使 text 输入框获得焦点
    this.textInput.focus();
  };
  //右键文本聚焦
  handleRight = (e) => {
    // 直接使用原生 API 使 text 输入框获得焦点
    // e.preventDefault();
    this.focus();
    // return true;
  };
  handleTimeChoose = (e1, e2) => {
    this.setState({ timeNow: e2 });
  };
  render() {
    const { hideModal } = this.props;
    const {
      text,
      fileList,
      creatorName,
      systemInfoIdList,
      selWindowList,
      moduleInfoIdList,
      selTradeList,
      moduleInfoIdList1,
      selTradeList1,
      baseImgArr,
    } = this.state;
    const fileRender = fileList.map((el) => {
      return (
        <li>
          <div> {el.name}</div>
          <div>
            <VerticalAlignBottomOutlined
              onClick={(e) => {
                this.downFile(el);
              }}
              style={{ marginRight: "10px" }}
            />
            <DeleteOutlined
              onClick={(e) => {
                this.delFile(el);
              }}
              style={{ marginRight: "10px" }}
            />
          </div>
        </li>
      );
    });
    const dateFormat = "YYYY-MM-DD";
    const modalOpt = {
      title: "新增缺陷",
      width: 1200,
      visible: this.state.showModal,
      onOk: () => this.handleSubmit(),
      onCancel: () => hideModal && hideModal(false),
      okText: i18n.ok,
      cancelText: i18n.cancel,
      maskClosable: false,
    };
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
    };
    const systemInfoIdListOption = systemInfoIdList.map((el) => {
      return <option value={el.id}>{el.value}</option>;
    });
    const windowlistOption = selWindowList.map((el) => {
      return <option value={el.id}>{el.value}</option>;
    });
    const moduleInfoIdListOption = moduleInfoIdList.map((el) => {
      return <option value={el.value}>{el.value}</option>;
    });
    const selTradeListOption = selTradeList.map((el) => {
      return <option value={el.id}>{el.value}</option>;
    });
    const moduleInfoIdListOption1 = moduleInfoIdList1.map((el) => {
      return <option value={el.value}>{el.value}</option>;
    });
    const selTradeListOption1 = selTradeList1.map((el) => {
      return <option value={el.id}>{el.value}</option>;
    });

    const imgList = baseImgArr.map((el) => {
      return (
        //
        <li contenteditable="false">
          <div className="close">
            <p
              className="close_p"
              onClick={() => {
                this.handleImgrRemove(el.index);
              }}
            >
              x
            </p>
          </div>
          <img src={el.base64} />
        </li>
      );
    });
    return (
      <Modal {...modalOpt} className="addissue">
        {/* 头部 */}
        <div className="addissue_t">
          <div className="addissue_title">缺陷摘要：</div>
          <div
            className="addissue_customInput"
            style={{ borderBottom: "1px solid #5B5B55", flex: 1 }}
          >
            <Input
              placeholder="插入标题"
              onChange={this.handleTitle}
              style={{ border: 0 }}
            />
          </div>
        </div>
        {/* 下面部分，分为左右两部分 */}
        <div className="addissue_b">
          <div className="addissue_b_l">
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <Tooltip className="file_t" placement="bottom" title={text}>
                <div>
                  提示：
                  <InfoCircleOutlined />
                </div>
              </Tooltip>
            </div>
            {/*  */}
            <div
              className="file_b"
              contenteditable="true"
              onPaste={this.pasteImg}
              onBeforepaste={this.pasteImgBefore}
              onClick={this.focus}
              onMouseEnter={this.focus}
              onContextMenu={this.handleRight}
            >
              {/* <div className="paste_issue">
                <CopyFilled className="copy_icon" />
                <div className="support" contenteditable="false">
                  支持粘贴图片...
                </div>
              </div> */}
              <ul className="img_list" contenteditable="true">
                <li className="paste_issue">
                  {/* <div className="paste_issue"> */}
                  <CopyFilled className="copy_icon" />
                  {/* contenteditable="false" */}
                  {/* <div className="support">支持粘贴图片...</div> */}
                  {/* 当在盒子里左键或者右键的时候，要让这个input聚焦
                  只有这个地方聚焦，右键能粘贴图片 */}
                  <input
                    type="text"
                    className="input_support"
                    placeholder="支持粘贴图片..."
                    ref={(input) => {
                      this.textInput = input;
                    }}
                  ></input>
                  {/* </div> */}
                </li>
                {imgList}
              </ul>
            </div>
            <div className="choose_img">
              <input
                type="file"
                multiple
                onChange={this.handleFileChange}
                className="file_list"
              ></input>
              <div className="file_box">
                <FolderOutlined style={{ marginRight: "5px", color: "blue" }} />
                选择....
              </div>
            </div>
            <ul className="ul_filelist">{fileRender}</ul>
          </div>
          <div className="addissue_b_r">
            <Form>
              {/* 所属开发项目 */}
              <FormItem {...formItemLayout} label={i18n.projectDevId}>
                {getFieldDecorator("projectDevId", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.projectDevId}${i18n.isNotNull}`,
                    },
                  ],
                  initialValue: "SunATP_自动化测试平台",
                })(
                  <Input
                    type="text"
                    disabled
                    placeholder={`${i18n.pleaseInput}${i18n.projectDevId}`}
                  />
                )}
              </FormItem>
              {/* 目标版本 */}
              <FormItem {...formItemLayout} label={i18n.targetVersion}>
                {getFieldDecorator("targetVersion", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.targetVersion}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    placeholder={`${i18n.pleaseSelect}${i18n.targetVersion}`}
                  >
                    {windowlistOption}
                  </Select>
                )}
              </FormItem>
              {/* 所属迭代 */}
              <FormItem {...formItemLayout} label={i18n.iteration}>
                {getFieldDecorator("iteration", {
                  rules: [
                    {
                      required: false,
                      message: `${i18n.iteration}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Input
                    type="text"
                    placeholder={`${i18n.pleaseInput}${i18n.iteration}`}
                  />
                )}
              </FormItem>
              {/* 缺陷来源 */}
              <FormItem {...formItemLayout} label={i18n.bugResource}>
                {getFieldDecorator("bugResource", {
                  rules: [
                    {
                      required: false,
                      message: `${i18n.bugResource}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Input
                    type="text"
                    placeholder={`${i18n.pleaseInput}${i18n.bugResource}`}
                  />
                )}
              </FormItem>
              {/* 缺陷来源编号 */}
              <FormItem {...formItemLayout} label={i18n.bugResourceCode}>
                {getFieldDecorator("bugResourceCode", {
                  rules: [
                    {
                      required: false,
                      message: `${i18n.bugResourceCode}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Input
                    type="text"
                    placeholder={`${i18n.pleaseInput}${i18n.bugResourceCode}`}
                  />
                )}
              </FormItem>
              {/* 所属任务 */}
              <FormItem {...formItemLayout} label={i18n.testTaskId}>
                {getFieldDecorator("testTaskId", {
                  rules: [
                    {
                      required: false,
                      message: `${i18n.testTaskId}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Input
                    type="text"
                    placeholder={`${i18n.pleaseInput}${i18n.testTaskId}`}
                  />
                )}
              </FormItem>
              {/* 测试阶段 */}
              <FormItem {...formItemLayout} label={i18n.taskStage}>
                {getFieldDecorator("taskStage", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.taskStage}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select placeholder={`${i18n.pleaseSelect}${i18n.taskStage}`}>
                    <Option value="62">集成测试</Option>
                    <Option value="63">系统测试</Option>
                    <Option value="64">验收测试</Option>
                    <Option value="65">回归测试</Option>
                  </Select>
                )}
              </FormItem>
              {/* 测试类型 */}
              <FormItem {...formItemLayout} label={i18n.bugTestType}>
                {getFieldDecorator("bugTestType", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugTestType}${i18n.isNotNull}`,
                    },
                  ],
                  initialValue: "320",
                })(
                  <Select
                    disabled
                    placeholder={`${i18n.pleaseSelect}${i18n.bugTestType}`}
                  >
                    <Option value="82">功能测试</Option>
                    <Option value="83">兼容性测试</Option>
                    <Option value="1033">UI自动化测试</Option>
                    <Option value="320">接口自动化测试</Option>
                  </Select>
                )}
              </FormItem>
              {/* 缺陷发现轮次 */}
              <FormItem {...formItemLayout} label={i18n.roundId}>
                {getFieldDecorator("roundId", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.roundId}${i18n.isNotNull}`,
                    },
                  ],
                  initialValue: "312",
                })(
                  <Select
                    disabled
                    placeholder={`${i18n.pleaseSelect}${i18n.roundId}`}
                  >
                    <Option value="89">执行第一轮</Option>
                    <Option value="90">执行第二轮</Option>
                    <Option value="91">执行第三轮</Option>
                    <Option value="309">UAT第一轮</Option>
                    <Option value="310">UAT第二轮</Option>
                    <Option value="311">冒烟测试（第1次）</Option>
                    <Option value="312">回归测试</Option>
                    <Option value="316">冒烟测试（第2次）</Option>
                    <Option value="317">冒烟测试（第3次）</Option>
                  </Select>
                )}
              </FormItem>
              {/* 缺陷摘要 */}
              <FormItem {...formItemLayout} label={i18n.bugTitle}>
                {getFieldDecorator("bugTitle", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugTitle}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Input
                    type="text"
                    placeholder={`${i18n.pleaseInput}${i18n.bugTitle}`}
                  />
                )}
              </FormItem>
              {/* 所属测试组 */}
              <FormItem {...formItemLayout} label={i18n.groupId}>
                {getFieldDecorator("groupId", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.groupId}${i18n.isNotNull}`,
                    },
                  ],
                  initialValue: "接口自动化测试组",
                })(
                  <Input
                    type="text"
                    disabled
                    placeholder={`${i18n.pleaseInput}${i18n.groupId}`}
                  />
                )}
              </FormItem>
              {/* 被测系统 */}
              <FormItem {...formItemLayout} label={i18n.systemInfoId}>
                {getFieldDecorator("systemInfoId", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.systemInfoId}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    onChange={(e) => {
                      this.selModuBySysid(e, "beTested");
                    }}
                    placeholder={`${i18n.pleaseSelect}${i18n.systemInfoId}`}
                  >
                    {systemInfoIdListOption}
                  </Select>
                )}
              </FormItem>
              {/* 被测模块 */}

              <FormItem {...formItemLayout} label={i18n.moduleInfoId}>
                {getFieldDecorator("moduleInfoId", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.moduleInfoId}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    onChange={(e) => {
                      this.selTradeByModu(e, "beTested");
                    }}
                    placeholder={`${i18n.pleaseSelect}${i18n.moduleInfoId}`}
                  >
                    {moduleInfoIdListOption}
                  </Select>
                )}
              </FormItem>
              {/* 所属交易/功能 */}
              <FormItem {...formItemLayout} label={i18n.bugSystemfunction}>
                {getFieldDecorator("bugSystemfunction", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugSystemfunction}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    placeholder={`${i18n.pleaseSelect}${i18n.bugSystemfunction}`}
                  >
                    {selTradeListOption}
                  </Select>
                )}
              </FormItem>

              {/* 所属案例编号 */}
              <FormItem {...formItemLayout} label={i18n.caseId}>
                {getFieldDecorator("caseId", {
                  rules: [
                    {
                      required: false,
                      message: `${i18n.caseId}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Input
                    type="text"
                    placeholder={`${i18n.pleaseInput}${i18n.caseId}`}
                  />
                )}
              </FormItem>
              {/* 优先级 */}
              <FormItem {...formItemLayout} label={i18n.bugPriority}>
                {getFieldDecorator("bugPriority", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugPriority}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    placeholder={`${i18n.pleaseSelect}${i18n.bugPriority}`}
                  >
                    <Option value="182">紧急</Option>
                    <Option value="183">很高</Option>
                    <Option value="184">较高</Option>
                    <Option value="185">一般</Option>
                    <Option value="186">低</Option>
                  </Select>
                )}
              </FormItem>
              {/* 分派给 */}
              <FormItem {...formItemLayout} label={i18n.bugDisper}>
                {getFieldDecorator("bugDisper", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugDisper}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select placeholder={`${i18n.pleaseSelect}${i18n.bugDisper}`}>
                    <Option value="15">徐亚飞</Option>
                  </Select>
                )}
              </FormItem>
              {/* 计划解决时间 */}
              <FormItem {...formItemLayout} label={i18n.bugJtime}>
                {getFieldDecorator("bugJtime", {
                  rules: [
                    {
                      required: false,
                      message: `${i18n.bugJtime}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  // <Input
                  //   type="text"
                  //   placeholder={`${i18n.pleaseInput}${i18n.bugJtime}`}
                  // />
                  <DatePicker
                    onChange={this.handleTimeChoose}
                    defaultValue={moment("2015/01/01", dateFormat)}
                    format={dateFormat}
                  />
                )}
              </FormItem>
              {/* 缺陷F分析 */}
              <FormItem {...formItemLayout} label={i18n.bugAnalysis}>
                {getFieldDecorator("bugAnalysis", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugAnalysis}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    placeholder={`${i18n.pleaseSelect}${i18n.bugAnalysis}`}
                  >
                    <Option value="231">1-新功能</Option>
                    <Option value="232">2-功能需求变更缺陷</Option>
                    <Option value="233">3-缺陷复测通过本轮重现</Option>
                    <Option value="234">4-功能测试通过新缺陷</Option>
                    <Option value="235">5-测试遗漏(本需求)</Option>
                    <Option value="236">6-生产逃逸缺陷</Option>
                  </Select>
                )}
              </FormItem>
              {/* 归属系统 */}
              <FormItem {...formItemLayout} label={i18n.bugGsystem}>
                {getFieldDecorator("bugGsystem", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugGsystem}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    onChange={(e) => {
                      this.selModuBySysid(e, "belong");
                    }}
                    placeholder={`${i18n.pleaseSelect}${i18n.bugGsystem}`}
                  >
                    {systemInfoIdListOption}
                  </Select>
                )}
              </FormItem>
              {/* 归属模块 */}

              <FormItem {...formItemLayout} label={i18n.bugGmodule}>
                {getFieldDecorator("bugGmodule", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugGmodule}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    onChange={(e) => {
                      this.selTradeByModu(e, "belong");
                    }}
                    placeholder={`${i18n.pleaseSelect}${i18n.bugGmodule}`}
                  >
                    {moduleInfoIdListOption1}
                  </Select>
                )}
              </FormItem>
              {/* 归属交易/功能 */}
              <FormItem {...formItemLayout} label={i18n.bugGtrade}>
                {getFieldDecorator("bugGtrade", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugGtrade}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select placeholder={`${i18n.pleaseSelect}${i18n.bugGtrade}`}>
                    {selTradeListOption1}
                  </Select>
                )}
              </FormItem>

              {/* 缺陷类型 */}
              <FormItem {...formItemLayout} label={i18n.bugType}>
                {getFieldDecorator("bugType", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugType}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select placeholder={`${i18n.pleaseSelect}${i18n.bugType}`}>
                    <Option value="192">非缺陷</Option>
                    <Option value="193">需求类</Option>
                    <Option value="194">代码类</Option>
                    <Option value="195">环境类</Option>
                    <Option value="196">迁移类</Option>
                    <Option value="197">性能类</Option>
                    <Option value="198">接口类</Option>
                    <Option value="199">参数类</Option>
                    <Option value="200">信息提示类</Option>
                    <Option value="201">其他</Option>
                  </Select>
                )}
              </FormItem>
              {/* 缺陷严重性 */}
              <FormItem {...formItemLayout} label={i18n.bugSeverity}>
                {getFieldDecorator("bugSeverity", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugSeverity}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select
                    placeholder={`${i18n.pleaseSelect}${i18n.bugSeverity}`}
                  >
                    <Option value="172">致命</Option>
                    <Option value="173">严重</Option>
                    <Option value="174">轻微</Option>
                    <Option value="175">改进</Option>
                    <Option value="176">一般</Option>
                  </Select>
                )}
              </FormItem>

              {/* 创建人 */}
              <FormItem {...formItemLayout} label={i18n.bugCreator}>
                {getFieldDecorator("bugCreator", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugCreator}${i18n.isNotNull}`,
                    },
                  ],
                  initialValue: creatorName,
                })(<Input type="text" disabled />)}
              </FormItem>
              {/* 缺陷发现环境 */}
              <FormItem {...formItemLayout} label={i18n.bugEnvir}>
                {getFieldDecorator("bugEnvir", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugEnvir}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select placeholder={`${i18n.pleaseSelect}${i18n.bugEnvir}`}>
                    <Option value="213">UATA环境</Option>
                    <Option value="214">UATB环境</Option>
                    <Option value="215">UATC环境</Option>
                    <Option value="216">SIT(开发)环境</Option>
                    <Option value="217">自动化测试环境</Option>
                    <Option value="218">性能测试环境</Option>
                    <Option value="219">专项测试环境</Option>
                    <Option value="220">生成环境</Option>
                    <Option value="221">SITB环境</Option>
                  </Select>
                )}
              </FormItem>
              {/* 需求提出部门 */}
              <FormItem {...formItemLayout} label={i18n.dept}>
                {getFieldDecorator("dept", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.dept}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select placeholder={`${i18n.pleaseSelect}${i18n.dept}`}>
                    <Option value="259">总行交易银行部</Option>
                    <Option value="260">总行投资银行部</Option>
                    <Option value="261">总行渠道管理部</Option>
                    <Option value="262">总行信息科技部开发中心</Option>
                    <Option value="263">总行公司业务部</Option>
                    <Option value="264">总行零售业务部</Option>
                    <Option value="265">科技开发部开发中心</Option>
                    <Option value="266">零售业务部</Option>
                    <Option value="267">交易银行二部</Option>
                    <Option value="268">总行汽车金融中心</Option>
                    <Option value="269">总行交易银行二部</Option>
                    <Option value="270">总行运营管理部</Option>
                    <Option value="271">总行票据中心</Option>
                    <Option value="272">总行金融市场部</Option>
                    <Option value="273">总行计财部</Option>
                    <Option value="274">总行信用卡部</Option>
                    <Option value="275">总行信息科技部管理中心</Option>
                    <Option value="276">总行信息科技部</Option>
                    <Option value="277">总行小企业金融事业部</Option>
                    <Option value="278">总行公司业务部战略客户中心</Option>
                    <Option value="280">总行资产保全部资产保全三中心</Option>
                    <Option value="281">总行创新管理中心</Option>
                    <Option value="282">零售业务条线风险管理中心</Option>
                    <Option value="284">总行信息科技部数据管理部</Option>
                    <Option value="285">总行信息技部开发中心</Option>
                    <Option value="286">总行资产负债管理部</Option>
                    <Option value="289">总行机构业务部</Option>
                    <Option value="290">金融研究院</Option>
                    <Option value="291">分行</Option>
                    <Option value="292">总行公司业务部机构客户中心</Option>
                    <Option value="293">
                      总行小企业金融服务中心授信审批部
                    </Option>
                    <Option value="294">总行营业部保卫科</Option>
                    <Option value="295">总行营业部零售部</Option>
                    <Option value="296">总行资产管理部</Option>
                  </Select>
                )}
              </FormItem>
              {/* 缺陷描述 */}
              <FormItem {...formItemLayout} label={i18n.bugDesc}>
                {getFieldDecorator("bugDesc", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugDesc}${i18n.isNotNull}`,
                    },
                  ],
                  initialValue:
                    "问题描述：\n测试数据：\n测试步骤：\n预期结果：\n实际结果：",
                })(
                  <TextArea
                    placeholder={`${i18n.pleaseInput}${i18n.bugDesc}`}
                    autoSize={{ minRows: 3, maxRows: 5 }}
                  />
                )}
              </FormItem>
              {/* 缺陷注释 */}
              <FormItem {...formItemLayout} label={i18n.bugNoteNow}>
                {getFieldDecorator("bugNoteNow", {
                  rules: [
                    {
                      required: true,
                      message: `${i18n.bugNoteNow}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <TextArea
                    placeholder={`${i18n.pleaseInput}${i18n.bugNoteNow}`}
                    autoSize={{ minRows: 3, maxRows: 5 }}
                  />
                )}
              </FormItem>
              {/* 修复时间提醒 */}
              <FormItem {...formItemLayout} label={i18n.fixRemind}>
                {getFieldDecorator("fixRemind", {
                  rules: [
                    {
                      required: false,
                      message: `${i18n.fixRemind}${i18n.isNotNull}`,
                    },
                  ],
                })(
                  <Select placeholder={`${i18n.pleaseSelect}${i18n.fixRemind}`}>
                    <Option value="0">提醒</Option>
                    <Option value="1">不提醒</Option>
                  </Select>
                )}
              </FormItem>
            </Form>
          </div>
        </div>
      </Modal>
    );
  }
  handleBeforesubmit = (callback) => {
    const { baseImgArr } = this.state;
    // let imgarr = [];
    // let fileLength = 0;
    // let reader = new FileReader();
    // if (this.state.fileList.length == 0) {
    //   return callback([]);
    // }
    // reader.readAsDataURL(this.state.fileList[fileLength]);
    // let that = this;
    // // 通过filereader,用readAsDataURL把files文件列表的文件一个个读取成base64
    // // 每次读取好了就会触发它的onload事件
    // // 要注意的是,filereader每次只能读取一个文件,所以这里才用这种长度判断
    // // 的方式不停的循环读取
    // reader.onload = function (res) {
    //   if (res.target.result) {
    //     imgarr.push(res.target.result);
    //     fileLength++;
    //     if (fileLength < that.state.fileList.length) {
    //       reader.readAsDataURL(that.state.fileList[fileLength]);
    //     } else {
    //       callback(imgarr);
    //     }
    //   }
    // };
    let that = this;
    let newNameArrList = [];
    let newNameImgArrList = [];
    for (let i = 0; i < that.state.fileList.length; i++) {
      let fd = new FormData();
      let newNameArr = that.state.fileList[i].name.split(".");
      // let newName = `${newNameArr[0]}+${new Date().getTime()}.${newNameArr[1]}`;
      // let newName = that.state.fileList[i].name;
      let newName = new Date().getTime();
      newNameArrList.push(newName);
    }
    for (let i = 0; i < that.state.imgFileList.length; i++) {
      let fd = new FormData();
      let newNameArr = that.state.imgFileList[i].name.split(".");
      let newName = `${newNameArr[0]}+${new Date().getTime()}.${newNameArr[1]}`;
      newNameImgArrList.push(newName);
    }
    let newBaseSrc = baseImgArr.map((el) => el.base64);
    callback(newNameArrList, newNameImgArrList, newBaseSrc);
  };
  clearAllCookie() {
    var date = new Date();
    date.setTime(date.getTime() - 10000);
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if (keys) {
      for (var i = keys.length; i--; )
        document.cookie =
          keys[i] + "=0; expires=" + date.toGMTString() + "; path=/";
    }
  }
  handleRealsubmit = (newNameArrList, newNameImgArrList, newBaseSrc) => {
    let that = this;
    const { defectTitle, timeNow, creatorId } = this.state;
    const { hideModal } = this.props;
    // console.log(creatorId);
    // that.props.form.setFieldsValue({ bugCreator: creatorId });
    // console.log(this.props.form.getFieldValue("bugCreator"));

    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.bugJtime = timeNow;
        values.bugCreator = creatorId;
        values.projectDevId = "738";
        // values.groupId = "51";
        values.groupId = "接口自动化测试组";
        values.bugDisper = "112";
        // let params = {
        //   projectId: localStorage.getItem("PROJID"),
        //   defectTitle,
        //   datas: values,
        // };
        if (!defectTitle) {
          return message.error("请输入缺陷标题");
        }
        // document.cookie = `projectId=${localStorage.getItem("PROJID")};`;
        // document.cookie = `Authorization=${localStorage.getItem(
        //   "access_token"
        // )};`;
        // jiraService1.bugManagement(params, function (res) {
        //   // S表示成功;
        //   if (res.code == 200) {
        //     // 成功之后得到返回的id，然后再发接下来的两个请求，上传图片请求
        //     if (imgarr.length > 0) {
        //       // document.cookie = "token=0;expires=" + new Date().toUTCString();
        //       jiraService1.uploadImg(
        //         { src: [...imgarr], defectId: res.data },
        //         function (res) {
        //           if (res.code == 200) {
        //             message.success("成功");
        //           } else {
        //             message.error("失败");
        //           }
        //         }
        //       );
        //     }

        //     for (let i = 0; i < that.state.fileList.length; i++) {
        //       let fd = new FormData();
        //       fd.append("file", that.state.fileList[i]);
        //       fd.append("defectId", res.data);
        //       jiraService1.uploadAccessory(fd, function (res) {
        //         if (res.code == 200) {
        //           if (i == that.state.fileList.length) {
        //             hideModal && hideModal(false);
        //           }
        //           message.success("成功");
        //         } else {
        //           message.error("失败");
        //         }
        //       });
        //     }
        //     message.success("成功");
        //   } else {
        //     message.error("失败");
        //   }
        // });

        let params = {
          input: {
            // projectId: localStorage.getItem("PROJID"),
            projectDevId: "738",
            defectTitle,
            datas: values,
            personId: creatorId,
          },
          sys: {
            prcscd: "defectPlatform",
          },
        };
        jiraService1.defectPlatform(params, async function (res) {
          //S表示成功
          if (res.sys.status == "S") {
            if (res.output.issuce == "true") {
              // 上传文件到服务器，包括下面的和上面的
              for (let i = 0; i < that.state.fileList.length; i++) {
                let fd = new FormData();
                // fd.append("file", that.state.fileList[i], newNameArrList[i]);
                // fd.append("file", that.state.fileList[i]);
                let newNameArr = that.state.fileList[i].name.split(".");
                let newName = `${res.output.defectId}_${i + 1}.${
                  newNameArr[1]
                }`;
                fd.append("file", that.state.fileList[i], newName);
                await new Promise((resolve, reject) => {
                  jiraService1.uploadImg1(fd, function (res) {
                    resolve();
                  });
                });
              }
              // for (let i = 0; i < that.state.imgFileList.length; i++) {
              //   let fd = new FormData();
              //   fd.append(
              //     "file",
              //     that.state.imgFileList[i],
              //     newNameImgArrList[i]
              //   );
              //   jiraService1.uploadImg1(fd, function (res) {});
              // }

              // 传上面的图片的base64

              let myNameList = [];
              for (let i = 0; i < that.state.fileList.length; i++) {
                let newNameArr = that.state.fileList[i].name.split(".");
                let newName = `${res.output.defectId}_${i + 1}.${
                  newNameArr[1]
                }`;
                myNameList.push(newName);
              }
              let params1 = {
                input: {
                  defectId: res.output.defectId,
                  personId: creatorId,
                  src: newBaseSrc,
                },
                sys: {
                  prcscd: "uploadimg",
                },
              };
              if (newBaseSrc.length != 0) {
                jiraService1.uploadImg2(params1, function (res) {});
              }

              // 传下面的文件的名字
              let params2 = {
                input: {
                  defectId: res.output.defectId,
                  files: myNameList.join(","),
                  personId: creatorId,
                },
                sys: {
                  prcscd: "uploadAccessory",
                },
              };
              if (myNameList.length != 0) {
                await new Promise((resolve, reject) => {
                  jiraService1.uploadAccessory1(params2, function (res) {
                    resolve();
                    hideModal && hideModal(false);
                  });
                });
              }
            } else {
              message.error(res.output.mesage);
            }
          } else {
            message.error(res.sys.erortx);
          }
        });
      }
    });
  };
  handleSubmit = () => {
    // 点击确定提交
    // 先执行一个函数，吧base64都读出来
    // 然后再执行提交的操作
    this.handleBeforesubmit(this.handleRealsubmit);
  };
}
const MyForm = Form.create()(AddIssueModal);
export default MyForm;

后来发现bug的原因是，第一次就算你是contenteditable="false"，第一次粘贴一定触发

但是之后你粘贴的内容，如果不是contenteditable="true"，那就不会有光标，不能编辑，那么粘贴就不会再触发了

但是我这里就是想实现，既不能编辑，又能触发粘贴。。。所以就难搞，要么就写成可编辑的，contenteditable="true"，但是能够阻止退格删除事件，不让删除

编辑区的东西

难搞，所以我就吧文件都放在下面了。。。。就没做上面这种

加了await async阻塞接口按顺序执行，await要接受一个promise，然后只要resolve执行就会释放阻塞，不再阻塞

可以看看这篇https://segmentfault.com/a/1190000007535316

React-Quill中图片粘贴的兼容问题
song279811799的博客
12-19 3157
quill-image-drop-module的简单优化
VS Code Live Share 实时协作原理与工程实践指南
weixin_30352191的博客
06-20 501
Live Share 是基于 Visual Studio Code 的实时协同开发协议，其核心并非远程桌面或云端托管，而是依托 Language Server Protocol（LSP）和 Debug Adapter Protocol（DAP）实现语义级代码共享，通过 WebRTC 建立 Host-Guest 端到端直连，保障源码不离本地、权限精细可控。该技术显著提升结对编程、远程调试与代码评审效率，适用于跨时区团队、安全敏感场景及新人上手等典型工程需求，是现代 IDE 协作范式的关键基础设施。
react-quill 图片上传及图片粘贴功能踩坑记录
qq_36550828的博客
11-03 5976
Gitlab React-quill：https://github.com/zenoamaro/react-quill 中文文档 Quill：http://doc.quilljs.cn/1409381 官网 Quill：https://quilljs.com/docs/quickstart/ Gitlab Delta：https://github.com/quilljs/delta 需求: 图片上传由base64改为走后端接口存储服务端 图片粘贴功能，也走后台接口存储服务端 坑点： focus，onb
Ant DesignUI组件源码分析——Alert
qq_46025739的博客
10-06 1290
2021SC@SDUSC 源码分析如下 1.导入相应模块以及相应的ICON图标 import CloseOutlined from '@ant-design/icons/CloseOutlined'; import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined'; import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutl
oracle常用命令
小微的博客
04-10 8959
批量insert数据 insert all into ksys_test(pckgsq, prcscd, pckgsq2, content) values ('9','10','11','12') into ksys_test(pckgsq, prcscd, pckgsq2, content) values ('13','14','15','16') SELECT 1 FROM DUAL -...
React中使用富文本编辑器Quill，支持粘贴图片
热门推荐
song279811799的博客
12-18 1万+
富文本编辑器Quill，粘贴图片组件
Gemini多模态工作流实战：Chrome端精准图文代码协同指南
weixin_33811539的博客
06-19 575
多模态技术本质是文本、图像与代码的跨模态对齐与协同推理，而非简单输入拼接。其核心原理在于建立空间锚点、结构锚点与输出约束，实现视觉定位→文本抽取→规则判断的可执行链路。Gemini凭借深度耦合的视觉感知、语言理解与代码建模能力，在前端开发、数据提取、技术文档生成等场景中展现出显著工程价值。本文聚焦Chrome浏览器这一低门槛入口，详解三段式提示工程、图片降噪锚定、纯文本代码协同等实操方法，解决‘设计稿转CSS’‘扫描件提表格’‘终端截图修Bug’等高频生产力断层问题。
Sqribble：模板驱动的云原生文档操作系统解析
最新发布
weixin_30437847的博客
06-30 347
文档自动化并非简单排版提速，而是基于结构化语义与可执行模板的出版范式升级。其核心原理在于内容归一化（将多源文本统一为带层级标签的树状模型）与布局引擎的确定性渲染（分页、目录、页眉页脚全自动注入），技术价值体现在消除机械性格式劳动、保障跨设备输出一致性、支持合规归档（PDF/A-1b）及轻量协作。典型应用场景包括市场白皮书生成、客户成功案例集制作、SaaS销售资料批量定制等。本文深入拆解Sqribble的七层架构与模板驱动机制，揭示其如何以非AI方式实现专业级文档生产力跃迁。
Claude Code对接GLM-5.2[1m]本地部署全链路指南
weixin_30374009的博客
06-22 456
Claude Code作为开源AI编程助手，本质是兼容Anthropic API规范的命令行客户端；其核心原理在于通过环境变量与配置文件协同，将请求透明转发至国产大模型API网关。技术价值体现在零代理适配、协议级兼容与可调试性，显著降低本地大模型工具链集成门槛。典型应用场景包括企业内网AI编码辅助、长上下文代码审查及私有知识库增强推理。本文聚焦GLM-5.2[1m]模型接入实战，深入解析ANTHROPIC_BASE_URL配置逻辑、glm-5.2[1m]方括号路由机制及CLAUDE_CODE_AUTO_CO
CentOS 8/Rocky Linux 8 LEMP 生产部署避坑指南
weixin_30299709的博客
06-19 345
LEMP（Linux + Nginx + MySQL + PHP）是Web服务的基础技术栈，其核心在于组件间安全、稳定、低延迟的协同运行。在RHEL系发行版如Rocky Linux 8或已EOL的CentOS 8上，模块化仓库（Modular）、SELinux上下文、Unix socket权限模型及MySQL 8.0认证机制等底层约束，显著区别于Ubuntu等发行版。理解Nginx的FastCGI通信原理、PHP-FPM进程管理模型与OPcache内存策略，是避免502错误、TTFB飙升和内存泄漏的关键。本
NextChat深度实战指南：本地化AI对话工具的工程化落地
weixin_33713707的博客
06-23 400
AI对话工具正从云端交互界面演进为可私有部署、可深度定制的本地化基础设施。其核心原理在于将模型调用、上下文管理与用户交互能力下沉至客户端，通过轻量前端直连API、本地IndexedDB存储、WebAssembly实时语义压缩等技术实现隐私优先与低延迟响应。这类工具的技术价值在于打破SaaS依赖、保障数据主权、支持多模型统一调度，并天然适配开发者工作流——如Rust调试辅助、Python代码审查、FFmpeg推流优化等典型场景。NextChat作为其中代表，以Mask工作流、本地Ollama集成、Gemini
Ctrl + V 粘贴上传文件，以React + Antd为示例
知之为知之，不知为不知
08-10 1476
Ctrl + V 粘贴上传文件，以React + Antd为示例
Ant Design在React hooks项目中的使用问题记录
Dancy的博客......
06-02 1074
本文主要记录本人在使用antd开发react hooks项目过程中，遇到的组件使用上的问题记录。总结一句话：多多熟悉官网文档，没有过不去的坎！ 内容涉及以下antd组件： Form 组件 Select 组件 TreeSelect 组件 Table 组件 Pagination 组件 ConfigProvider 官方文档链接：点击查看 Ant Design 官方文档 一、Form 组件 表单默认值设置问题 复杂的动态新增表项问题 动态新增默认值设置问题 多选Select导致表单样式错位问题 自定义组件问题
react中，ant design中双击事件触发单击事件解决办法
web_cgh的博客
06-18 2860
onClick，onDoubleClick
React+Hook+ts+antDesign实现伪定时调用接口功能
qq_41632427的博客
03-09 196
前言 大家好 我是歌谣 微信公众号关注前端小歌谣 今天要做的需求是接口 在一定时间里面执行一次的功能 定义循环时长 说一下整体实现思路吧 定义定时器执行时间的状态 这里是十秒 可以通过接口配置调用 const [delay, setDelay] = useState(10000) 定义分页 const [pageIndex, setPageIndex] = us...
基于Antd自定义图标选则组件
quan
05-10 1153
IconSelect组件是基于 Ant Design 的 ProComponents 开发的一个图标选则组件。
react 实现告警铃铛触发警报
LiYinger1的博客
07-29 333
该代码实现了一个React告警通知组件，包含以下功能：1. 通过图标和颜色区分不同级别告警（严重/错误/警告/信息）；2. 顶部显示各级别告警统计数量；3. 支持声音提醒（可开关）；4. 每5秒自动刷新告警数据；5. 最多显示5条最新告警，可点击查看详情；6. 提供"查看全部"跳转按钮。组件使用Ant Design UI库构建，包含徽章计数、弹出框、列表等交互元素，适用于监控系统的实时告警展示需求。
react实现粘贴图片地址或粘贴图片文件上传
qq_57926178的博客
04-06 1226
在saveImgUrl方法中，通过创建img节点来判断复制的文本内容是否是图片链接，onload成功后，通过传入的onChange函数保存图片地址以便预览及传给后端，并传入callback回调。首先给Input绑定onBlur和onPaste事件，并判断是否超过图片文件最大数。最近有个需求是实现粘贴图片地址或者直接粘贴图片上传并预览。可以用onBlur搭配onPaste事件来实现。以下则是直接复制图片文件上传的实现方式。
React实现监听粘贴事件并获取粘贴板中的截图
百创科技
05-30 1496
目录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值