antd表格添加数据不更新_关于antd 中使用Form.Item 结合CheckBox 无法更新改变状态的问题...

最新推荐文章于 2024-06-01 10:54:36 发布
最新推荐文章于 2024-06-01 10:54:36 发布
阅读量986 收藏
点赞数
文章标签： antd表格添加数据不更新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39528219/article/details/113373718
版权

时隔多个月 终于 又转战react, rn我真的太难了。

事件前提：最近在开发react框架的后台管理系统。必不可少的用到antd-design。提交一个数据比较多的表格。因为需要判断一些必填和规则。所以如果自己写就比较麻烦，在这里就用到react-design的Form组件。

在项目中 其他都好说 但是有一个多选框 ===>

20191225131830707091.png

这里CheckBox 可以用 CheckBox.Group。因为使用Form.Item 那么问题来了,看截图---->

20191225131830921943.png antd官网指出了 使用Form.Item无法使用setState 。所以会出现什么情况呢，就是你点击box 不会给你响应。

解决方法是 既然他不能使用state 那么可以曲线救国呀。 那我们这里就用props来解决，首先整个表单是一个组件，接受一个包含影响chenckbox状态的数据。点击子级的checkbox的时候本来是修改子级的state的 但是这里可以去动态的修改props(也就是父级的传给子级的数据源)。这样就可以完美的做到想要的效果了。

这个是我耗时很久想到的方法，不知道还有没有简单的方法，如果哪位同志知道的话 可以告知告知。QAQ

weixin_39528219
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd表格添加数据不更新_在react项目中使用 antd-Table,实现动态表格数据修改
weixin_33622153的博客
12-23 4099
有时候在react项目中会遇到表格数据实时修改的的需求，话不多说，直接上代码。index.state.js中可以写import { observable, action, toJS } from ‘mobx’;class State {@observable data = [];@observable columns = [{title: ‘name’,dataIndex: ‘name’,widt...
【antd checkbox】 form表单checkbox 但是checkbox不受控
Riptide
04-16 367
原因：checkbox比较特殊，值绑定用checked，所以需要对form做特殊配置。问题：form表单里面checkbox不能绑定数据。
数据更新后Ant Design Table组件界面未刷新怎么解决？
最新发布
南城
06-01 518
在使用Ant Design的Table组件时，我们时常需要动态更新表格数据以满足应用需求。然而，有时即使数据已经更新，界面却没有进行相应的刷新。它确保当数据更新时，React能够准确判断哪些行发生了变化，并据此进行最小化的DOM操作。属性是确保Ant Design Table组件在数据更新后能够正确进行界面刷新的关键。如果确实需要使用索引作为临时解决方案，请确保这些操作不会影响到最终展示给用户的数据顺序。通过避免常见问题并采用合适的方法，我们可以提高Table组件的渲染性能和稳定性，为用户提供更好的体验。
antd中的form表单 initialValue导致数据不更新问题
weixin_33763244的博客
06-03 2377
初步理解 ： initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变，却又有一些不同，因为 initialValue又会因其他改动而改变。 然而当获取的数据重新上来要渲染的时候 ，initialValue的值却又不改变，所以 让人觉得很是捉摸不透。 解决：````this.props.form.resetFields();``` 例：如果第一步操作执行的是修...
使用antd组件在表格中添加checkbox不能实时更新的问题。
weixin_69903461的博客
02-21 344
数据已经更新，但页面每次要刷新页面才会更新。
antd Table，Form
weixin_43924896的博客
09-10 1401
antd-table组件的经验
antd表格添加数据不更新_elementUI中的Table组件tableData数据变化后，表格不会重新渲染怎么办...
weixin_39926540的博客
12-31 1601
需要实现多语言，点击切换语言按钮后，表格数据也实时变化请求后台时获取的数据中就包含英文名称和中文名称，根据目前前台所保存的语言类型，判断给tabledate赋英文名称还是中文名称；切换语言时，tabledate的值可以能做到改变，但是table组件中的值并没有发生变化，这是为什么；下面是我的代码，谢谢各位queryGameApi(this.category, this.sportType, thi...
Python库 | feffery_antd_components-0.0.1a15.tar.gz
03-04
标题中的"Python库 | feffery_antd_components-0.0.1a15.tar.gz"指的是一个Python库的发布版本，它被压缩为tar.gz格式的文件。这个库名为"feffery_antd_components"，版本号为0.0.1a15，这表明它是该库的早期开发...
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
03-07
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 react：...
antd-form-item-view-hoc:一个简单的HOC，用于AntD Form.Item，使其仅显示文本而不显示组件。 当您需要表单的查看模式时，此功能很有用
05-15
一个非常简单的HOC，用于AntD Form.Item，使其仅显示文本而不显示组件。 当您需要表单的查看模式时，此功能很有用。 安装 yarn add form-item-view-hoc 用法 这是将此HOC与AntD Form.Item一起使用的示例 import ...
react PC端项目构建，react@18.2.0+antd+vite+axios+redux+sass
03-07
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 react：...
全栈（React+Antd+Egg+MongoDB）：数据管理系统.zip
08-03
标题中的“全栈（React+Antd+Egg+MongoDB）：数据管理系统”指的是一个使用现代前端技术栈和后端框架构建的全面解决方案，用于创建一个数据管理系统。这个系统利用了React作为前端JavaScript库，Ant Design作为UI...
ant-design 数据更新Dom不更新问题
m0_47733490的博客
04-24 2240
需求是当选中第一题的选项1，则直接回答第三题，选中第一题的选项二，正常回答问题1,2,3，其实就是问题的跳转，这里遇到的bug是，我每次选择新的选项都会与后端进行交互，后端把表单的数据，和答案的数据两组值传回给我进行新的赋值，但是当我选中第一题的选项2，正常回答123题，再选中第一题的选项1，回答1,3题，此时应该只有问题1和问题3 当我再点回问题1的选项2时，就出现了bug，问题2的答案没有渲染上，但是后端传过来的数据是有问题2的答案的，所以此时为dom没有更新 这里支撑问题和答案回显...
antd中，国际化切换是，form表单错误提示不及时更新问题
weixin_44759289的博客
05-12 953
在开发中，我们可能会遇到使用国际化i18n的情况，但是当我们切换语言时，form表单的错误提示却不能及时更新，这时我们可以选择行内校验法，在者就是，使用this.$refs.form.resetFilds()来进行情况校验 ...
antd form + checkbox 全选/反选问题
qq_42708369的博客
12-12 3707
import React, { Component } from 'react'; import { Form,Checkbox, Row, Col } from 'antd'; const FormItem = Form.Item; const options1=[ { label: 'A1', value: 'a1' }, { label: 'A2', value: 'a2'...
Ant Design使用＜Form.Item＞的defaultValue值不能更新的问题
专注基础架构领域
08-26 2055
这个是官方的Bug，改两个东西，一个是在<Form.Item>中加一个唯一key（这个key唯一代表一个组件，名称不能重复），另一个要改的地方是在<Form.Item>下面加一个<input hidder={true} value={default_value}>，然后就可以刷新这个初始默认值了，代码如下： <Form.Item {...field} name={[field.name, item['param_code']]} fieldKey={
antd 弹框中的表单form 初始化问题
apple_2021的博客
11-19 1841
问题描述： 在公司做项目的时候，有一个关于表格中的编辑需求，我在弹框中用antd的表单组件，点开时，默认要显示目前行的相关数据。但是表单组件的initialValue只会渲染一次，这就导致我第二次点击编辑的时候还是第一次的数据。 代码如下： <Modal title={modelTitle} centered visible={this.state.modal2Visible} onOk={() => this.addSubmit()} onCancel={() => this
ant design (antd) FormItem getFieldDecorator Checkbox 无法选中的解决方案
wyk304443164的专栏
05-11 2万+
本文出自： http://blog.csdn.net/wyk304443164 先给案例：<FormItem {...formItemLayout} label="销售方式" > {getFieldDecorator('is_alone_buy', { rules: [{ required: true, message: '请选择销
Form表单之复选框checkbox操作
热门推荐
陈三的博客
01-13 3万+
1.input复选(checkbox)： input复选1组： checkbox复选1 checkbox复选2 checkbox复选3 相同name的单选项为同一组复选,checked="checked"选中某复选项；相同name的单选项为同一组复选,checked="checked"选中某复选项；相同name的单选项为同一组复选,checked="checked"选中某复选项；
使用antd将页面多选的对象出道后台
06-08
1. 在页面中使用 Checkbox 组件，设置 checkboxOptions 和 checkedList 状态： ```jsx import React, { useState } from 'react'; import { Checkbox } from 'antd'; const plainOptions = ['Option 1', 'Option 2...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值