ReactAntd(十六) React-内联表单

Antd - 内联表单

React-antd 现在全面使用了 Hooks 所以代码大部分使用了 Hooks

表单的共性

• onFinish 必须有 最后的按钮提交

• 必须有 name 属性,字段的属性

• 表单必须有 form 属性

内联表单属性

• 内联属性必须有 layout

import { Form } from 'antd'

function useForm() {
  // form 最后就是控制整个表单
  const [form] = Form.useForm()
  return (
    <Form
      form={form}
      name="horizontal_login"
      layout="inline"
      onFinish={onFinish}
    >
      <Form.Item name="username">
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          placeholder="用户名"
        />
      </Form.Item>
    </Form>
  )
}

export default useForm