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

最新推荐文章于 2024-07-30 10:40:43 发布

是谁的心儿啊

最新推荐文章于 2024-07-30 10:40:43 发布

阅读量4.7k

点赞数

分类专栏： react antd antdDesign 文章标签： javascript

本文链接：https://blog.csdn.net/dashinihao/article/details/114552294

版权

react antd 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

antdDesign

3 篇文章 0 订阅

订阅专栏

本文介绍了在Ant Design的Form.Item下如何获取自定义表单元素的值，提供了两种解决方案。一种是通过Form.Item的嵌套来分别获取每个表单项的值，另一种是创建自定义组件并利用onChange方法将多个值返回给FormItem。通过自定义组件，可以将多个Select的值组合成一个对象返回，从而在父组件中通过getFieldsValue获取到完整的数据。

摘要由CSDN通过智能技术生成

如何在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.props
        onChange({test:items,...value})  //value解构后和 test:items组成新的对象
    }
    testChange2=(items)=>{
        let {value={},onChange}=this.props
        onChange({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"}

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