#yyds干货盘点 【React工作记录三十】react中form表单编辑的时候回显无法回显

简介: #yyds干货盘点 【React工作记录三十】react中form表单编辑的时候回显无法回显

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语

求助同事 编辑的时候无法进行回显操作


image.png


编辑


<Form.Item label="机构名称:">
{getFieldDecorator('name', {
   initialValue:
   type === 'update'
 ? { code: lecturerOrganizationEntity.companyLibraryCode }
 : {},
  rules: [{ required: true, message: '请填写机构名称' }],
})(
<BaseCompanyLibrary disabled={disabled} onChange={this.handleChangeCompany} />
)}
 </Form.Item>




解决方法

<Form
              style={{
                display: editStep === 0 && !successModal ? 'block' : 'none',
                marginTop: '50px',
              }}
              {...formItemLayoutSmall}
              id={`${id}base-info`}
              key={JSON.stringify(lecturerOrganizationEntity)}
            >



总结

绑定key值可以进行数据渲染 问题可解









相关文章
|
7月前
|
前端开发 UED 开发者
React 19 Actions:表单处理从未如此优雅
React 19 Actions:表单处理从未如此优雅
349 84
|
移动开发 前端开发 JavaScript
React 表单与事件
10月更文挑战第10天
197 1
|
前端开发 JavaScript 数据安全/隐私保护
深入探索研究React表单
【10月更文挑战第6天】
183 57
|
存储 前端开发 JavaScript
React 表单输入组件 Input:常见问题、易错点及解决方案
本文介绍了在 React 中使用表单输入组件 `Input` 的基础概念,包括受控组件与非受控组件的区别及其优势。通过具体代码案例,详细探讨了创建受控组件、处理多个输入字段、输入验证和格式化的方法,并指出了常见易错点及避免方法,旨在提升表单的健壮性和用户体验。
341 4
|
前端开发 JavaScript
React 表单处理技巧
【10月更文挑战第24天】本文从初学者角度出发,详细介绍了 React 中表单处理的基本概念、常见问题及解决方案。涵盖受控组件与非受控组件的区别、状态更新、表单验证、多字段管理及高级技巧,通过代码示例帮助读者更好地理解和应用。
330 7
|
前端开发 计算机视觉
React使用antd实现可编辑单元格
React结合Ant Design实现可编辑单元格的表格组件,通过EditableRow和EditableCell封装实现单元格编辑功能,并提供saveFun回调保存编辑内容。
627 1
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
267 0
|
监控 前端开发 搜索推荐
react 表单受控的现代实现方案
`react-form-simple`是一个轻量级的React表单库,专注于简化受控表单的开发,提供数据绑定、验证、错误处理和UI更新等功能。它通过简洁的API减少复杂性,支持第三方UI库集成,并具备高度可扩展性。核心特点包括基于Proxy的数据绑定、实时错误处理、高效的UI更新和灵活的使用方式。通过`useForm`和`render`等钩子,开发者可以快速构建表单应用,同时支持动态表单和自定义验证规则。该库旨在提高开发效率,适用于复杂表单场景,降低学习和维护成本。
486 2
react 表单受控的现代实现方案
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
340 1