ReactJS

分类下相关文章

Ant Design Form.Item 中使用 Select 组件默认值总是显示数字

现象 在 Antd Pro 中使用了 Antd Form 来编辑报修单的进度状态。 但是在选中一条记录,在使用 Select 组件进行编辑时,总是显示状态码,而非状态描述。 看起来是之前遇到过的,select value 的整型与字符串的转换问题。 Warning: children should be Select.Option or Select.OptGroup instead of Option 原始代码: <Form.Item name="status" label="状态"> <Select> <Optio ...

阅读全文...

Antd Form 一行多个 Form.Item 组件

在使用 Antd Form 时,当 Form 的宽度很宽,一行只显示一个 input 时,感觉空间有点浪费。 一行能同时显示两个 input 输入框就好了,例如,同时显示: 姓名 电话 Form 中的示例 <Row gutter={24}>{getFields()}</Row> <Row> <Col span={24} style={{ textAlign: 'right' }}> <Button type="primary" htmlType="submit ...

阅读全文...

Antd Pro 列表页 ProTable 自定义搜索字段

例如,我想在 Antd Pro 列表页的查询区域去掉一些字段,不希望这些字段参与搜索。 参考 ProTable 组件的文档: https://procomponents.ant.design/components/table 实际上在设置 columns 时,就可以通过 column 配置来设置一个字段是否可以被搜索。 代码示例 const columns: ProColumns<API.Article>[] = [ { title: "标题", dataIndex: "title", valu ...

阅读全文...

React Quill 富文本编辑器中图片上传服务端

在 Antd Pro 中使用 React Quill 富文本编辑器,上传图片默认会转换成 Base64,然后上传服务器,保存到数据库中。 但是如果图片过大,就非常不适合在数据库中存储,同时也会占用服务器的带宽。 需要改造成 React Quill 上传图片到服务器,然后转发到七牛云 CDN,将链接返回前端。 工具栏显示上传图片 如何自定义 React Quill 的工具栏功能列表? const toolbarContainer = [ ['bold', 'italic', 'underline', ], [{ 'color': [] }, { ' ...

阅读全文...

Ant Design Upload 组件上传图片到 Golang 服务端

上传组件 Antd Pro 中使用 Ant Design 的 Upload 上传组件 https://ant.design/components/upload-cn 图片预览还是有必要的,所以先参考“图片墙”那个示例代码。 封装!解决状态无法重置的问题 简单将示例中的代码复制到了 Ant Design Form 中,但是在 Antd Pro Table List 中切换数据行时,会发现图片预览一直是上一个已上传的图片。即,组件状态没有重置。 看了网上大哥们的实现,我发现都是将 Upload 再封装为一个组件。 然后在 Form Item 中使用该组件。 这样遵循 Form Item 的规范,就 ...

阅读全文...

Antd Pro 服务挂掉 Disconnected from the devServer, trying to reconnect

今天发现 Antd Pro 的开发服务经常挂掉,浏览器中显示: Disconnected from the devServer, trying to reconnect... 看起来是由于没有处理后台 404 的错误,导致前端 node 服务挂掉。。。 [HPM] Error occurred while trying to proxy request /api/upload-image from localhost:8000 to http://localhost:8088 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_c ...

阅读全文...

Antd Pro 加入富文本编辑器

需求 能方便整合入 Ant Design Form 中 能支持,或者方便扩展,将富文本编辑器中的图片上传至七牛云存储中 备选方案列表 Ant Design 官方推荐了两个: https://ant.design/docs/react/recommendation-cn React Quill。首选推荐。测试了一圈,确实这个最靠谱。 Braft Editor。有 Ant Design 的集成说明文档:https://braft.margox.cn/demos/antd-upload 安装 Braft Editor tyarn add braft-editor 参考文档: https:/ ...

阅读全文...

设置 React Quill 富文本组件的高度

默认在 Ant Design Pro 中使用 React Quill 富文本组件时,并没有默认高度。 看起来不太舒服。所以想加上高度限制: 最低高度限制 最高高度限制 实现 在自定义的 Form 组件目录下,新建一个 css 文件,例如 CreateForm.css. .ql-editor{ min-height: 200px; max-height: 500px; } 然后在组件中引入 css 文件即可 import './CreateForm.css'; ...

阅读全文...

Antd Pro 的列表页,新建、更新 Modal Form 复用同一个

这次基本是边修改 Antd Pro 模板,边学习 reactjs 的情况下,摸索新建、更新复用 Modal Form 的使用的。 我觉得能实现 Form 新建、编辑功能,基本上 reactjs 就算是入门了。。。 上手时间成本 看 reactjs tutorial 一个小时 尝试修改 TableList 的代码改成标准 Ant Design 组件,删除 Pro Components 组件,半天 默认新建 Modal 用的 ModalForm 的局限性 ModalForm 是 ProForm 的一种,即 Pro Components 的组件之一,参考 https://procomponent ...

阅读全文...

react tutorial 笔记

props 为传入组件的参数,全称 properties state 为内部状态管理 基于 class 的 react 组件:onClick={() => alert('click')} 回调函数用大括号包裹,并且必须使用剪头函数。参考 value={this.state.squares[i]},可见react jsx语法是用大括号来包裹 html 属性变量,而 vue 则是在属性名前加:,都是为了显式区分属性变量。而在基于函数的组件中,onClick={props.onClick},就不需要箭头函数的写法了。 浏览器辅助插件 React Devtools extension Lift ...

阅读全文...

Antd Pro 列表页警告信息 Each child in a list should have a unique "key" prop

Antd Pro 列表页中报了一条警告信息: devScripts.js:6523 Warning: Each child in a list should have a unique "key" prop. 虽然是 ProTable 组件,但是文档里并没有提到这个属性,需要参考 ant design 的 Table 组件 https://ant.design/components/table-cn/ rowKey:表格行 key 的取值,可以是字符串或一个函数 应该是作为 row 的唯一标识的。 修改成对应的后台数据返回 key 就可以了,例如: <ProT ...

阅读全文...

消除 Antd Pro 的 i18n 缺失翻译警告提示 Missing message

由于我用 Antd Pro 开发的管理后台只需要中文,并不需要其他语言的翻译,所以代码里就没有使用翻译组件。 但是在运行时,浏览器一堆警告信息: devScripts.js:6523 [React Intl] Missing message: "menu.知识库" for locale: "zh-CN", using default message as fallback. 消除 i18n 翻译警告的方法 编辑 config/config.ts: 将 layout 配置中的 locale 注释掉: layout: { // https:/ ...

阅读全文...

使用 antd pro request post 数据到 golang gin 报错 400 EOF

golang gin 的报 400 错误 var article models.Article if err := c.ShouldBindJSON(&article); err != nil { log.Println(err) c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } err 显示 EOF。查了一下,当 post 的数据是空时,会报这个错误。 antd pro umi request 的写法 起初是参考示例里的写法: export async fun ...

阅读全文...

React 中 useState hook 是什么?

Ant Design Pro 中经常看到这样的代码,例如 table list 中: const AdminUsers: React.FC = () => { /** 新建窗口的弹窗 */ const [createModalVisible, handleModalVisible] = useState<boolean>(false); const [currentRow, setCurrentRow] = useState<API.AdminUser>(); ... } 这里面的 useState 是什么意思呢? useState 的用法 ht ...

阅读全文...

golang gin & ant design pro 前后端分离的登录实现

管理员用户表 admin_user id username password last_login_at 创建第一个管理员 方案: 命令行工具 (golang 需要编译,提供一个命令行工具麻烦) 网页接口 (不安全) 自动内置一个管理员,服务启动时(或者打开登录页时)判断如果没有管理员,就自动创建一个。登录后修改密码。 综合来看,第三种方案更合适。 管理后台 TODO 清单 done: 登录接口 done: 新增默认管理员 done: 生成 token done: golang gin token 校验 middleware done: currentUser 接口,获取用户信息 d ...

阅读全文...