当前位置: 首页 > news >正文

reactantd(12)动态表单的默认值问题

最近遇到一个需求是有一个表单可以输入各种信息,然后还需要有一个编辑功能,点击编辑的时候需要把当前数据填入到表单里面。在网上查了很多种方法,然后我的思路是使用initialValues搭配setState()使用。默认值都为空,然后点击单条数据时把该条数据需要的字段setState()更新。

// Table组件的columns
[{xxx},{title: '操作',key: 'operator',dataIndex: 'operator',align: "center",width: 100,render: (item, record) => {return (<div><Button type='primary' onClick={()=> openModal(record)}>编辑</Button></div>)}},
]const openModal = (record) => {// 有传record说明是点击编辑if (record) {this.setState({//在这里把你需要填入的字段进行setState   })}}

 注意在setState的时候要按照antd需要的数据结构进行传递,以上面的祝福语列表这个Form.Item为例,此时blessing_list需要是有个数组,里面的每一项就是一行数据,["xxx","yyy"]在页面上就是如下图所示,默认是两条数据的。其他的input和select也是类似的做法。

<Form.ItemclassName={styles.formItem}name='blessing_list'label='祝福语列表'rules={[{ required: true, message: '请填写祝福语列表!' }]}initialValue={blessing_list}
><Form.List name="blessing_list">{(fields, { add, remove }) => (<>{fields.map(({ key, name, fieldKey, ...restField }, index) => (<Space key={key} align="baseline"><Form.Itemstyle={{ flex: 1 }}{...restField}name={[name]}width={'100%'}fieldKey={[fieldKey]}label={`祝福语${index + 1}`}rules={[{ required: true, message: '请填写祝福语!' }]}><Input style={{ flex: 1 }} /></Form.Item><MinusCircleOutlined onClick={() => remove(name)} width={20} /></Space>))}<Form.Item><Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>新增祝福语</Button></Form.Item></>)}</Form.List>
</Form.Item>

http://www.lryc.cn/news/145059.html

相关文章:

  • 无涯教程-Python机器学习 - Stochastic Gradient Boosting函数
  • SOLIDWORKS中多实体文件到装配体的转换技巧
  • Transformer (Attention Is All You Need) 论文精读笔记
  • Git企业开发控制理论和实操-从入门到深入(二)|Git的基本操作
  • Positive Technologies 专家帮助修复 Western Digital 网络存储设备中的一个危险漏洞
  • 【springboot】springboot定时任务:
  • 腾讯云学生服务器申请、学生认证入口及学生机价格表
  • pip安装mysqlclient依赖报错 /bin/sh: 1: mysql_config: not found如何解决
  • 基于paddleocr的版面分析
  • 网工内推 | IT网工,华为、华三认证优先,15k*13薪
  • leetcode 739. 每日温度
  • 【活体检测模型】活体检测思路推演
  • 【微服务部署】03-健康检查
  • SQL注入之报错注入
  • 基于大数据+django+mysql的银行信用卡用户的数仓系统
  • 【网络】多路转接——五种IO模型 | select
  • sql顺序倒序查询
  • java和sql生成时间维度数据
  • HUT23级训练赛
  • sm4 加解密算法工具类( Java 版 )
  • Redis项目实战——商户查询缓存
  • 重磅OpenAI发布ChatGPT企业版本
  • # Go学习-Day7
  • uniapp-form表单
  • 漏洞挖掘-利用
  • React钩子函数之useDeferredValue的基本使用
  • lodash常用方法
  • QByteArray与结构体之间相互转换
  • npm如何安装淘宝镜像
  • 从项目中突显技能:在面试中讲述你的编程故事