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

Posted 2023-05-05

参考技术A 4.0之前

4.0之后

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值的。