antd的Form.Item中存在多个与运算符时,提交表单获取到的值为undefined的问题

Posted 兰村_frontend

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd的Form.Item中存在多个与运算符时,提交表单获取到的值为undefined的问题相关的知识,希望对你有一定的参考价值。

错误的写法:

<Form.Item name=name label=label>
   type === 'input' && (
     <Input style= width: '200px'  placeholder=placeholder />
   )
   type === 'singleDay' && (
     <DatePicker style= width: '200px'  placeholder=placeholder />
   )
 </Form.Item>

这样写的问题在于最终渲染的结果是下面这样的。Form.Item里面的内容不再只是单纯的表单元素,因此在提交表单时获取的值肯定是undefined。

<Form.Item name=name label=label>
  false
  <DatePicker style= width: '200px'  placeholder=it.placeholder />
</Form.Item>

正确的写法:

<Form.Item name=name label=label>
  (() => 
   if (type === 'input') 
      return <Input style= width: '200px'  placeholder=placeholder />
    else if (type === 'singleDay') 
      return <DatePicker style= width: '200px'  placeholder=placeholder />
    else 
      return ''
    
  )()
</Form.Item>

主要在于与运算符在不匹配的时候是会返回false值的。

以上是关于antd的Form.Item中存在多个与运算符时,提交表单获取到的值为undefined的问题的主要内容,如果未能解决你的问题,请参考以下文章

antd的Form.Item中存在多个与运算符时,提交表单获取到的值为undefined的问题

antd的Form.Item中存在多个与运算符时,提交表单获取到的值为undefined的问题

react antd form.item 中有多个控件时解决方案

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

Antd:如何更改 Antd Form.Item 标签文本颜色?

antd 父组件获取子组件中form表单的值