办公室高手

ant中，datepicker，为何需要点击“选择时间”才会出现时间选择框?

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241001/62dc0c10e715fa65d6d1727adadbb84b.png) 如题所述，为何需要点击“选择时间”才会出现时间选择框。 下边是官网的例子，不需要点按钮，同时显示日期框和时间框 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241001/38ed318ece8781df7667fb5e0feaae4b.png) //我的代码 //官网代码

瞳孔放大黑洞

ant design react validateTrigger失效怎么办？

使用ant design react 通过 Form.useForm 对表单数据域进行交互。 这个里面Form.item里面包的组件是个包了两层的父子组件，然后使用validateTrigger的时候我发现没有效果，只能默认设置onchange，想设置成onBlur没有效果，Form.Item属性、rule里面属性 我都加了validateTrigger为onBlur，Form.Item的name属性也加了，都没有效果，请问怎么处理？ 加了validateTrigger为onBlur**

代码日记

ant design react 5 暗黑主题 Menu不生效?

ant design react 5暗黑主题时，menu组件设置darkItemBg不生效是为什么；所有关于暗黑模式的Design Token都不生效"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/6911e7eb068ab784820e8a00af239ab1.png)"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/27da99598071407195aee4accd70f73c.png)

ciiiiinema

antd List组件renderItem中使用Collapse时子项长度为零导致标题展示问题?

PC网站开发使用antd中的List组件renderItem中返回组件Collapse在子项长度为零时Collapse标题展示有误 { handleHelpInfo(child) }} style={{ cursor: 'pointer', marginBottom: 10, background: token.bgColorPrimary, padding: 4 }}>{child.title}) } ]} /> 希望官方予以修改

JayCoder

vue3 Ant Design 抽屉组件怎么不管用？

代码 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241002/8a6c02bd02f00a948c887fcc8d3c70d2.png) 页面展示 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241002/964c19a420cc8f74f047986bf238b139.png) ant也安装了 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241002/e692f6a042e2a6222d15b439ca11b2a6.png) 点击按钮"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241002/93d4447b8a9ca9ce9acee371483a458f.png)

金刚老六

ant design +Table组件 + Switch组件组合使用 没有正确渲染？

ant design +Table组件 + Switch组件组合使用 在 render: (text: string, record: any) => { console.log('record.checked',record.NAME,record.checked,text) 输出的checked都为true了，但是Switch没有选中， 甚至我对table的data数据进行了useMemo了还是不行， const tableRedner=useMemo(()=>{},[data]) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240927/20f7b16ebd7254993e75af375e801c6a.png) ant design +Table组件 + Switch正常的渲染

momo

如何优雅地覆盖antdesign的样式?

如何优雅地覆盖antdesign的样式? 我想要把将这个"button"的"border"去掉(只是这个"button"，不影响其他"button"的样式)。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/252173c0ac1d391bf12e429bd8d7204a.png) import React from "react"; import PropTypes from "prop-types"; import { Button, Flex, ConfigProvider } from "antd"; import Icon from "@ant-design/icons"; import Sort from "../../assets/sort.svg?react"; console.log("sort: ", Sort); function CommentTitle({ commentsCount, chooseSortRule }) { return ( {commentsCount > 0 ? commentsCount + " " : ""}留言 } /> 排序 ); } 1. "className" or "style"都不行，"Button"组件没有提供这两个"prop"。倒是有一个"classNames"不知道是干什么的。 2. 在"index.css"中添加以下规则，倒是可以去除"Button"上的"border"但是会影响所有的"Button"样式。.ant-btn { border: none; } 3. 通过"ConfigProvier"来设置"Button"组件的"token"，但是没有将"border"直接设置为"none"的"token"，只有一些"token"用来设置不同状态下"border"的颜色。我可以将这些颜色设置为"transparent"，让它看起来没有"border"。此时，可以达到了预期，但是要修改不少的"token"。 有没有其他更优雅一些的方法?

喝一杯吧可以吗

如何使用antDesign的Form组件实现类似Youtube的评论表单?

需求 想使用antdesign的Form实现类似youtube的评论表单。 * 初始包括 * 头像 * 输入框 "commentBox-form-default.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/48fcce5f3e4fdbeb03090c6fa376626b.png) * 聚焦(点击输入框或tab)输入框的时候 * 输入框下面显示"取消按钮"和"评论按钮" * 两者靠右对齐 * 当输入框中的内容为空的时候，"评论按钮"为"disabled" "commentBox-form-focus.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/4d81f3f1149b28b443b579581e762d62.png) * 取消输入框聚焦（鼠标点击其他位置或tab到其他可聚焦元素)的时候，保持不变。 * 按取消键，输入框底部的两个按钮消失，当前输入框中的内容清空。 尝试 "codesandbox" (https://link.segmentfault.com/?enc=%2FQjDZhrS9aYDlVKdyl6MeA%3D%3D.Iwp9LfZHrfAn1ZhKXKsSnfnpJZyCfou2rSLinh7XYARoM1EVJsTUjR4I0L0MlC476Jkhm%2Bm8fqFNJGgzjSG%2FvSu%2F3zTbbPLYAl07fCme0MQ%3D) import { Form, Avatar, Flex, Input, Button, Space } from "antd"; import React from "react"; function CommentForm() { const [show, setShow] = React.useState(false); const [form] = Form.useForm(); const comment = Form.useWatch("comment", form); function handleReset() { console.log("handle reset"); form.resetFields(); setShow(false); } console.log("comment ", comment); return ( P console.log("Finished")} className="grow" form={form} > !show && setShow(true)} /> {show && ( 取消 评论 )} ); } export default CommentForm; 问题: 1. 如何在聚焦时候的时候让两个按钮出现同时在取消聚焦的时候保持不变呢? * "onFocus" + "show state" * 还有其他更好的方案吗? 2. 如何使两个按钮向右对齐？ * 方案一: 在"Form.Item"的外面套一层"Flex", 设置"justify="end""。 * 方案二: "Form"其实使用了栅格来对"Form.Item"来进行布局, 设置"wrapperCol={{span: ?, offset: ?}}"，"offset"只能相对于左侧，设置多少得用眼来估计，并不准确。 * 还有其他更好的方案吗? 3. 如何在点击取消按钮的时候使按钮消失，并清空输入框? * "onClick"中"setShow(false)"使按钮消失 * 如何清空输入框? * 使用"Form.useForm()"产生一个"formInstance"传入"Form"，然后在"onClick"中调用"resetFields"，但是当传入"Form"的时候报错了"Cannot set properties of undefined (setting 'name')"。 * 后来发现应该是"const [form] = Form.useForm()"而不是"const form = Form.useForm()"。 4. 如何知道当前的输入框是否为空？ * 方案一：设置一个新的状态,将"value", "onChange"绑定到"Input"上?读"文档" (https://link.segmentfault.com/?enc=qJSCXOzLzCj0siiCdtzO1g%3D%3D.x%2BStKNjXc1WBM0tzVFDhaAbMxXVdTUlcDc%2FrCYIUAyzLZq0vAeXOA6nSRhe6YP1qTw4A20LPg7rF5X63wV18Xw%3D%3D)发现表单控件会自动生成"value"和"onChange"来控制数据，不能再使用"value"来设置数据，不应该使用"setState"。 * 行不通 * 方案二：借助"Form.useWatch("comment", form)"就可以获取当前"comment"的值了。 还有其他更优雅的实现方案吗? 附文档中相关说明： «被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：* 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。 * 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。 * 你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。»

脑洞大咖

有大佬知道这种占比怎么实现不？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241209/6027213315097dcdf1f6313045284cd2.png) 三角形上面的图片也需要根据百分比，去渐变，动态变化 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241209/d7760c485a9ac0e9f212b9ac8562b9b5.png) 貌似Ui设计渐变的左右搞反了

JayCoder

node+express使用multer上传的图片怎么让前端显示？

做了一个前后端分离的文件上传 前端使用react+antd的upload组件实现上传功能，后端使用node+multer，图片上传成功了，也存到数据库里了但是前端无法显示 前端代码 } /> 后端代码 var express = require('express') var router = express.Router() const multer = require('multer') const userController = require('../controllers/users') const upload = multer({ dest: 'public/avatars/' }) router.post( '/update-avatar', upload.single('avatar'), userController.updateAvatar ) updateAvatar: async (req, res) => { const { file } = req const avatarUrl = `/public/avatars/${file.filename}` const { id } = req.body try { const data = await userServices.updateAvatar(avatarUrl, id) if (data[0]) { res.send(sendData(true)) } } catch (error) { res.status(500).send(sendData(false, error.message)) } }, 上传成功后在本地文件显示为这样 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/787ed57f6d5f5809db322b65ede82bca.png) 数据库里 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/8b19e73cbf40bf13af30cff881666155.png) 显示在页面上 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/db96ffce594d23ddae9c3fa589390a1f.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/f7e552e5123c79892692d8b20747c102.png)