关于antd 中使用Form.Item 结合CheckBox 无法更新改变状态的问题

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

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

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

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

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

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

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

原文地址：https://www.cnblogs.com/liaoyanhui/p/12095775.html

时间： 2024-10-23 21:30:39

关于antd 中使用Form.Item 结合CheckBox 无法更新改变状态的问题的相关文章

64ListView中item中有CheckBox带来的选择状态混乱的解决

如图:当选择第二个条目的时候,往下翻: 看到下面有的居然自己勾上了: 再网上翻,发现上面的有的也自己勾上了: 第一次遇到这个问题(手机管家项目第一次遇到这个问题,这里是拿<第一行代码>复习了),感觉好奇怪,甚至感觉有点不可思议.但是静下来想想,不过是因为复用convertView带来的问题. 解决方式: 第一步:在bean中新增 一个filed:checked,用来记录CheckBox的选择与否. 第二步,在onItemClickListener监听器中,使用view.getTag()取出Vi

jquery checkbox选中、改变状态、change和click事件

这个常用的小知识点感觉有必要记一下: jquery判断checked的三种方法:.attr('checked'); //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false.prop('checked'); //16+:true/false.is(':checked'); //所有版本:true/false//别忘记冒号哦 jquery赋值checked的几种写法:所有的jquery版本都可以这样赋值:// $(&qu

AntD中input和form组件的问题

AntD中input的小坑 在用antd中我把input封装成的一个用来修改内容的小组件(input输入框的内容会根据从修改的内容展现默认值),当我使用了defaultValue这个属性 不管传值怎么变化这个defaultValue属性只有在第一次渲染的时候生效  随后的渲染一直用的时缓存中的数据. 因为每次打开组件的时候我需要跟新input中的值的  我就在input中添加了defaultValue这个属性  就出现了状态不更新的问题了 <Input defaultValue={this.pr

QTableView中嵌入复选框CheckBox 的四种方法总结

搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四种比较适合扩展,它除了可以嵌入复选框,还可以通过paint()绘制其它控件,图片等自定义风格. 第一种方法是:编辑委托法 这种方法直接利用委托中重载createEditor(),激活QCheckBox,这个缺点是必须双击/选中,才能显示CheckBox控件.一般不满足我们实际中的直接显示的需要.可以

在PHP中处理表单之—Checkbox

原文转载自:http://www.html-form-guide.com/php-form/php-form-checkbox.html 单个checkbox  形如: <form action="checkbox-form.php" method="post"> Do you need wheelchair access? <input type="checkbox" name="formWheelchair&quo

Oracle EBS中有关Form的触发器的执行顺序

http://blog.csdn.net/postfxj/article/details/8135769 触发器执行顺序: 1．  当打开FORM时: (1)       PRE-FORM (2)       PRE-BLOCK(BLOCK级) (3)       WHEN-NEW-FORM-INSTANCE (4)       WHEN-NEW-BLOCK-INSTANCE (5)       WHEN-NEW-RECORD-INSTANCE (6)       WHEN-NEW-ITEM-I

Django 框架篇(九): Django中的Form 组件

Django中的Form组件,帮我们处理了 form表单中的校验, 和错误提示的处理: 主要功能: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 使用form组件实现注册功能 1.  定义一个类, 继承django中的 forms.Form 代码实例: from django import forms # 按照Django form组件的要求自己写一个类 class RegForm(forms.Form): name = forms.CharField(label="用

django中的 form 表单操作

1. 定义   from django import forms # 定义form   class RegForm(fo rms.Form):    user = forms.CharField(label='用户名')    pwd = forms.CharField(label='密码') 2. 使用   视图中    form_obj = RegForm()    return render(request, 'register2.html', {"form_obj": form

HTML DOM 中的form

HTML  DOM中的form表单 form表单获取: var form = document.forms; 一.百度表单验证 样式代码: <style type="text/css"> form{ width:750px; margin: 0 auto; position: relative; } .span_first{ width: 65px; height: 42px; display: inline-block; color: black; font-weight