如何在ant 的表单Form.Item下获取自定义表单元素的值

有时我们会遇到开发需求一个FormITem下有多个表单项的值需要获取，这时候我们就需要自定义表单元素，来获取，举例来说假如我一个Form.Item有多个表单项

 <FormItem name="select",label="多个选择"><Select><Option label="漩涡鸣人" value="xuanwo"> 漩涡鸣人</Option><Option label="玖辛奈" value="jiuxinnai"> 玖辛奈</Option></Select><Select><Option label="宇智波佐助" value="zuozhu"> 宇智波佐助</Option><Option label="宇智波鼬" value="you"> 宇智波鼬</Option></Select></FormItem>

这时候问题出现了，只能获取一个的值，但是两个值我都想要咋办，
这时候有两个办法

第一个 Form.Item进行嵌套也是可以的

<FormItem label="选择项"><FormItem name="select1" ><Select><Option label="漩涡鸣人" value="xuanwo"> 漩涡鸣人</Option><Option label="玖辛奈" value="jiuxinnai"> 玖辛奈</Option></Select></FormItem><FormItem name="select2" ><Select><Option label="宇智波佐助" value="zuozhu"> 宇智波佐助</Option><Option label="宇智波鼬" value="you"> 宇智波鼬</Option></Select></FormItem>
</FormItem>

这样可以分别获取其值
第一种我们通过getFiledsValue方法获取的值就是
{select1：”xuanwo“，select2：“zuozhu” }

第二种方法我们可以自定义组件

 <FormItem name="select",label="多个选择">//自定义组件<Test  /></FormItem>class Test extends Component{state={}testChange=(items)=>{let   {value={},onChange}=this.propsonChange({test:items,...value})  //value解构后和 test:items组成新的对象}testChange2=(items)=>{let {value={},onChange}=this.propsonChange({test2:items,...value})}render(){  return(<div><Select onChange={this.testChange}   ><Option label="漩涡鸣人" value="xuanwo"> 漩涡鸣人</Option><Option label="玖辛奈" value="jiuxinnai">玖辛奈 </Option></Select><Select onChange={this.testChange2}   ><Option label="宇智波佐助" value="zuozhu">宇智波佐助</Option><Option label="宇智波鼬" value="you">宇智波鼬</Option></Select></div>)}
}

我来理解的这个方法是把onChange函数和value值传到我们自定义的组件里面去，然后子组件的select调用onChange方法可以返回给FormItem的value值，
这种方法最终通过getFIledsValue调用打印出来的值是这种类型的{select：{test1:"xuanwo",test2:"zuozhu"}

各位大佬有不对之处还请多多指教

如何在ant 的表单Form.Item下获取自定义表单元素的值相关推荐

java自定义表单_JSP实现用于自动生成表单标签html代码的自定义表单标签
本文实例讲述了JSP实现用于自动生成表单标签HTML代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkBox,select,radi ...
表单在线生成 html代码,JSP实现用于自动生成表单标签html代码的自定义表单标签...
本文实例讲述了JSP实现用于自动生成表单标签html代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkbox,select,radi ...
【jQuery】使用jquery.form.js，获取提交表单返回值
jQuery表单库介绍实现 html 中提交表单并实现不跳转页面处理返回值 jQuery表单库(jquery.form.js库)以jQuery为基础,用于处理表单AJAX提交,使得表单AJAX提交简 ...
python自定义表单_django admin添加自定义按钮自定义表单
我想在'Add model_name'附近添加一个自定义按钮.当我点击新创建的按钮时,我想显示一个自定义表单,我可以从选择框中选择一个模型.当我点击保存时,我想保存这个模型,并有机会获得一些参数,所以 ...
react + ant design InputNumber在form.item中如何设置格式比如 KG，CM
第一种:只有一个符号格式,比如￥, $, %, &, 等等.参考antdesign 官网参考链接:https://ant.design/components/input-number-cn/ ...
antd Form.Item的name是数组时如何取值
前提:item的name是这种数组形式的时候,可以在不处理数据结构的同时,直接获取目标参数值,同时还可以创建form表单数据结构. 解:当item的name为数组时,后面的参数会作为前一个参数的属性存 ...
php 复选框未选,php – 在表单发布时如何获取复选框元素中未选中复选框的值？...
第一种方式 – 隐藏的字段(缺点:用户可以操纵该字段的值(但是也可以操纵该复选框的值),所以它不是真的是一个问题,如果你只期望1或0)) var_dump($_POST); /* * checking ...
javaweb系统oracle锁表,oracle、websphere下获取数据库连接时出现死锁
环境 windows 2003 server websphere 7. druid 0.2.9 oracle 11 druid参数 initialSize=60 maxActive= 200 异常 [ ...
EXTJS-Ext.form.ComboBox下拉框默认选中某一个值（SimpleStore）
适用于SimpleStore,没有在JsonStore上试增加ext的公共方法:fireEvent Ext.getCmp("id").fireEvent('select',Ext ...
html css移动form表单位置,表单form的研究
起因最近经常在群里看到诸如以下这些问题: 怎么按键盘的Enter键提交表单呢? 移动端怎么聚焦时让键盘变成数字键呢? 移动端如何绑定键盘右下角[提交按钮]事件? 移动端键盘右下角[提交]如果换成[搜 ...

如何在ant 的表单Form.Item下获取自定义表单元素的值

如何在ant 的表单Form.Item下获取自定义表单元素的值

如何在ant 的表单Form.Item下获取自定义表单元素的值相关推荐

最新文章

热门文章