🐛[BUG] 在ProForm.Item包裹下使用ReactQuill的时候，每按下一个按键就失去焦点

huaiguoguo commented 2 years ago

🐛 bug 描述

在使用 antd 的 ProForm.Item组件包裹ReactQuill富文本组件的时候，每输入一个字母(或者按下一个按键后)就失去焦点

在很多场景下不可避免使用富文本组件，在这方面可否出一个ReactQuill组件和ProForm结合的教程或文档

或者官方出一个富文本组也可以

📷 复现步骤

<ProForm.Group title={'内容部分'} style={{marginTop: '30px'}}>
  <ProForm.Item label={'商品简介'} name={'goods_introduction'} style={{height: '100%'}} rules={[{required: true, message: '请输入商品简介', validator: checkEditor}]}>
    <ReactQuill theme={'snow'}
                    value={value}
                    onChange={handleChange}
                    modules={modulesOptions}
                    style={styleCustomHeight}/>
  </ProForm.Item>
</ProForm.Group>

🏞 期望结果

💻 复现代码

<ProForm.Group title={'内容部分'} style={{marginTop: '30px'}}>
  <ProForm.Item label={'商品简介'} name={'goods_introduction'} style={{height: '100%'}} rules={[{required: true, message: '请输入商品简介', validator: checkEditor}]}>
    <ReactQuill theme={'snow'}
                    value={value}
                    onChange={handleChange}
                    modules={modulesOptions}
                    style={styleCustomHeight}/>
  </ProForm.Item>
</ProForm.Group>

© 版本信息

ProComponents 版本: [e.g. 4.0.0] ant-design-pro@5.0.0
Antd 版本: [e.g. 4.0.0] antd@4.21.7
umi 版本
浏览器环境 firefox, chrome
开发环境 [e.g. mac OS] win11专业版 22000.795

🚑 其他信息

"dependencies": {
    "@amap/amap-jsapi-loader": "^0.0.3",
    "@ant-design/charts": "^0.9.4",
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-descriptions": "^1.6.8",
    "@ant-design/pro-form": "^1.18.3",
    "@ant-design/pro-layout": "^6.15.3",
    "@ant-design/pro-table": "^2.30.8",
    "@antv/data-set": "^0.11.0",
    "@antv/l7": "^2.3.7",
    "@antv/l7-maps": "^2.3.7",
    "@antv/l7-react": "^2.1.9",
    "@types/lodash.debounce": "^4.0.6",
    "@umijs/route-utils": "^1.0.36",
    "ahooks": "^2.0.0",
    "antd": "^4.14.0",
    "bizcharts": "^3.5.3-beta.0",
    "bizcharts-plugin-slider": "^2.1.1-beta.1",
    "classnames": "^2.2.6",
    "gg-editor": "^2.0.2",
    "lodash": "^4.17.11",
    "lodash-decorators": "^6.0.0",
    "moment": "^2.25.3",
    "numeral": "^2.0.6",
    "nzh": "^1.0.3",
    "omit.js": "^2.0.2",
    "react": "^17.0.0",
    "react-dev-inspector": "^1.1.1",
    "react-dom": "^17.0.0",
    "react-fittext": "^1.0.0",
    "react-helmet-async": "^1.0.4",
    "react-quill": "^1.3.5",
    "react-router": "^4.3.1",
    "umi": "^3.5.0",
    "umi-serve": "^1.9.10"
  },

chenshuai2144 commented 1 year ago

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

你好，如果只是想解决富文本组件在 ProForm.Item 中的问题，可以尝试将 ProForm.Item 中的 style 属性删除，保持和 ReactQuill 组件的一致即可。

<ProForm.Item
  label="商品简介"
  name="goods_introduction"
  //style={{ height: "100%" }} // 删除这一行
  rules={[{ required: true, message: "请输入商品简介" }]}
>
  <ReactQuill
    theme={"snow"}
    value={value}
    onChange={handleChange}
    modules={modulesOptions}
    style={{ height: "100%" }} // 和 ProForm.Item 保持一致
  />
</ProForm.Item>

另外，推荐一篇针对 ReactQuill 和 Ant Design Pro 的教程，内容涵盖了如何在 Ant Design Pro 中使用 ReactQuill 组件，希望对你有帮助：ReactQuill 在 Ant Design Pro 中的使用。

最后，建议在编写 issue 描述时提供尽量完整的信息如相关版本号、环境等信息，方便更好的定位问题。希望能对你有所帮助，如有其他问题，欢迎继续提问。

chenshuai2144 commented 1 year ago

这个应该是你的组件实现的问题，组件被销毁了

ant-design / pro-components