ant design Form与ProForm中的input与ProFormText

最新推荐文章于 2022-04-24 18:13:02 发布
最新推荐文章于 2022-04-24 18:13:02 发布
阅读量2.9k 收藏
点赞数
分类专栏： 前端 文章标签： ant design input 默认值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/runrun117/article/details/122541070
版权

input与ProFormText输入默认值的时候，使用initialValue，而不是使用defaultXXX

runrun117
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant design pro动态菜单
10-08
自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！
ant-d pro ProFormText 二次封装
weixin_47338877的博客
02-28 2488
这里没啥好说的 只是单纯的合并了’password’ | ‘textArea’ 此外配合其他封装 /* * @Author: your name * @Date: 2021-10-28 18:01:14 * @LastEditTime: 2022-02-22 15:19:03 * @LastEditors: Mao * @Description: In User Settings Edit * @FilePath: \archives-web\src\components\myComponen
ant design pro 表单
你好！刘斩仙
04-16 4129
1、Input Enter事件 <input onKeyUp={this.onKeyUp} onPressEnter={this.enter}> onKeyUp = (e) => { if(e.keyCode === 13){ console.log("我是enter")
ant design pro v5 之 ProForm自定义表单项
无缺的博客
04-24 6763
需求背景：ProForm 默认提供的表单项无法满足项目开发 解决方案：ProForm本身是在原来的Ant Design Form 的基础上增加一些语法糖和布局设置等等，那我们就看看ProForm是如何做的不就行了 了解之后得知：ProForm的表单代码是通过如下方式来创建的： const ProFormText = (props) => { return ( <ProForm.Item {...props}> <Input placeholder={p
react+AntDesign Form表单编辑进行回显
weixin_43609391的博客
03-19 3358
class Information extends React.Component{ formRef = React.createRef() // 第一步 constructor(props) { super(props); this.state = { name：'', bundleId: '' }; this.getEditData(); } // 获取APP列表信息 getEditData(){ this.formR
ant design4.40 web组件库 ant design pro后台模板库（精细-完整）
12-26
Ant Design 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 ant design4.40-web组件库 是基于Axure ，参考Ant Design 的样式而设计的一套模板库，是产品经理必备套件库，Ant Design...
基于 Ant Design of Vue 实现的 Ant Design Pro 源码
12-29
基于 Ant Design of Vue 实现的 Ant Design Pro 源码 安装依赖 npm install 开发模式运行 npm run serve 编译项目 npm run build
Ant Design Pro V5框架中移植原生高德地图
03-10
在Ant Design Pro框架中嵌入高德地图，参考高德官网的源码。 1、在AMapLoader.load中填写你在高德开发平台申请的key 2、在vs code终端运行npm start 3、浏览器中打开http://localhost:8000
antd proform中的select（ProFormSelect）使用
热门推荐
runrun117的博客
06-07 1万+
<ProFormSelect label="角色可见范围" name="select2" mode="multiple" fieldProps={{ onChange:(val) => handleChang..
ant design pro 使用＜PageContainer＞面包屑不显示问题
runrun117的博客
03-26 7181
可能是因为config配置路由的时候path写法不正确。 当写/datapublish/todoList/时，面包屑不显示 当写/datapublish/todoList时，面包屑显示。区别在于路径最后有没有“/”
React AntDesign 聊天机器人 阿里ChatUI使用
runrun117的博客
06-25 6942
使用阿里的antDesignPro开发了前端项目，现在根据需求进行了客户对话框的开发，找了三个组件。 https://blog.csdn.net/yehuozhili/article/details/108552890 https://fredrikoseberg.github.io/react-chatbot-kit-docs/#tutorials 最后发现阿里开源的ChatUI组件好看，有“比较”前的组件文档。所以就开始根据ChatUI开发。当然以上才材料也有很多借鉴的地方，三个组件可以根据需求自
ant design中Button与button点击事件
runrun117的博客
03-19 4949
有参数时： <Button className={styles.fzBtn} onClick={() => swithTree(1)} >组织树</Button> 书写不正确会导致循环渲染这个方法 没有参数时： <Button className={styles.button} onClick={submitInfo()}> 确定人员信息 </Button> ...
Dva 的connect使用
runrun117的博客
03-02 3915
// 用于将返回的命名空间中的status绑定这个控件中 用来链接组件和状态管理器 export default connect(({ listRed, loading }) => ({ //数组就相当于给当前空间props赋值 av: listRed, // 要绑定的命名空间 // submitting: loading.effects['listRed/fetch'], submitting: 'apopi', }))(Login); js组件中使用connect，指.
useEffect与useState
runrun117的博客
03-20 3672
本教程是React Hooks系统教程中的一部分。 React 函数组件本身不包含状态和生命周期，因此需要使用一些 Hooks （勾子）函数来实现状态保持、状态共享和传递。 useState 可以通过 useState 为函数组件添加内部状态。组件会侦听 state 的状态变化并重新 render 渲染组件。下面我们使用 useState 创建了一个计数器，文件名为 ExampleState.js 此示例实现单击按钮，增加计数。 import React, { useState } from "
[BABEL] Note: The code generator has deoptimised the styling of .js as it exceeds the max of 500KB.
runrun117的博客
05-26 3658
某个js文件（自己编写或者引用)的文件大小太大 [BABEL] Note: The code generator has deoptimised the styling of xxxxxxx/typescript.js as it exceeds the max of 500KB. 用到的一个js文件大约500kb报的错 在项目根目录下新建.babelrc { "compact": false, "presets": ["env", "react", "stage-0"], "plugi
umi 动态加载组件 dynamic 自定义loading图片
runrun117的博客
11-09 3423
前端项目ant design 在加载单页应用的时候，要显示动态加载的loading图标。这使用使用dynamic来进行设置，设置方法有两种 1、在配置文件中使用config.js dynamicImport: { loading: '@/components/PageLoading/index', }, 2、自己手写dynamic的组件 官方文档：https://umijs.org/zh-CN/docs/load-on-demand import { dynamic } from
react ant design Table中的columns自定义渲染 循环渲染
runrun117的博客
11-22 3096
react渲染内容
浏览器上不去网络。需要进入ie点开Internet选项，网络中，局域网（LAN）设置，可以勾选上自动检测设置
runrun117的博客
03-30 3093
antdesignpro ProForm显示图片
最新发布
06-13
可以通过使用 `ProForm.Item` 的 `render` 属性来自定义表单项的渲染方式，从而实现在表单中显示图片。 以下是一个使用 `ProForm.Item` 自定义表单项渲染方式来显示图片的示例代码： ```jsx import { ProForm, ProFormText } from '@ant-design/pro-form'; import { Upload } from 'antd'; const MyUpload = () => { return ( <Upload> <Button icon={<UploadOutlined />}>Upload</Button> </Upload> ); }; const MyImage = ({ value }) => { return ( <img src={value} alt="preview" style={{ maxWidth: '100%', maxHeight: '100%' }} /> ); }; const MyFormItem = ({ name, label, rules, render }) => { return ( <ProForm.Item name={name} label={label} rules={rules} render={render} /> ); }; const MyForm = () => { return ( <ProForm> <MyFormItem name="name" label="Name" rules={[{ required: true }]} render={() => <ProFormText />} /> <MyFormItem name="avatar" label="Avatar" render={() => <MyImage />} rules={[{ required: true }]} /> <MyFormItem name="upload" label="Upload" render={() => <MyUpload />} rules={[{ required: true }]} /> </ProForm> ); }; ``` 在上面的代码中，我们定义了一个 `MyUpload` 组件和一个 `MyImage` 组件，分别用来处理上传文件和显示图片的逻辑。然后我们又定义了一个 `MyFormItem` 组件，用来自定义表单项的渲染方式。在 `MyFormItem` 组件中，我们通过 `render` 属性来指定表单项的渲染方式，实现了在表单中显示图片的效果。 最后，在 `MyForm` 组件中，我们使用 `MyFormItem` 组件来定义表单项，其中 `name` 属性用来指定表单项的字段名，`label` 属性用来指定表单项的标签名，`rules` 属性用来指定表单项的验证规则，`render` 属性用来指定表单项的渲染方式。通过这样的方式，我们可以实现一个自定义表单项渲染方式的表单，并在其中显示图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值