记录Ant Design的Form.Item组件中使用Button组件的一点注意细节

大家好，React框架新手前端，记录一下在学习Ant Design的Form.Item组件中使用Button组件的一点注意细节。

先上代码：

import Layout from "../core/layout"
import { Button, Form, Input, message } from "antd"

function AddCategory () {
  const addCates = values => {
    if (values.name) {
      return message.success('添加成功')
    }
    return message.warning('请输入分类名称')
  }

  return (
    <Layout title='添加分类'>
      <Form onFinish={addCates}>
        <Form.Item name='name' label="分类名称">
          <Input></Input>
        </Form.Item>
        <Form.Item>
          <Button type='primary'>添加分类</Button>
        </Form.Item>
      </Form>
    </Layout>
  )
}

export default AddCategory

以上是一个非常简单只有一个输入框和一个按钮的表单，如下图：

但有一个问题，点击“添加分类”按钮时没有效果。

原因：代码第19行的Button组件缺少htmlType="submit"属性，记得加上htmlType属性。

import Layout from "../core/layout"
import { Button, Form, Input, message } from "antd"

function AddCategory () {
  const addCates = values => {
    if (values.name) {
      return message.success('添加成功')
    }
    return message.warning('请输入分类名称')
  }

  return (
    <Layout title='添加分类'>
      <Form onFinish={addCates}>
        <Form.Item name='name' label="分类名称">
          <Input></Input>
        </Form.Item>
        <Form.Item>
          <Button type='primary' htmlType="submit">添加分类</Button>
        </Form.Item>
      </Form>
    </Layout>
  )
}

export default AddCategory

点击“添加分类”按钮，成功触发表单提交：

以上这点小细节的记录和分享。代码写得不好，请大佬忽略我哈。