antd中Form.Item无法获取到对应的表单值解决

前言

本文章讲的解决方案只是其中一种，无法获得对应表单的原因有很多，只能在今后的道路上慢慢采坑然后避免。

问题代码示例

import React, { Component } from 'react'
import { Button, Form, Input } from 'antd'
import Son from './Son'


const App = () => {

  return (
    <>
      <div>
        <Form onFinish={(values) => {
          console.log(values)
        }}>
          <Form.Item name="userName">
            <span>文本</span>
            <Input></Input>
          </Form.Item>
          <Button htmlType="submit">提交</Button>
        </Form>
      </div>
    </>
  )
}
export default App;

效果如下：

可以发现，输出的结果是undefined，那么为什么会这样呢？

请看代码中的细节和问题部分：

<Form.Item name="userName">
  <span>文本</span>
  <Input></Input>
</Form.Item>

问题来了：请问userName对应的是下面哪个标签呢？是span？还是Input？

因为无法准确的定位，所以输出的结果是undefined。

解决

如果将上述代码改为：

<Form.Item name="userName">
  <div>
    <span>文本</span>
    <Input></Input>
  </div>
</Form.Item>

或者更干脆的改为：

<span>文本</span>
<Form.Item name="userName">
    <Input></Input>
</Form.Item>

效果则如下：

最终结论：

• 在使用Form.Item获取表单数据的时候，千万要注意，对于最外层的标签，同级别的只能有一个。