如何在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"}
各位大佬有不对之处 还请多多指教 😘