前言

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

问题代码示例

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获取表单数据的时候，千万要注意，对于最外层的标签，同级别的只能有一个。