表单笔记-Antd(Form)

antd表单使用笔记

import React, { useState, useEffect, useRef } from "react";
import { Form, Input, Button, DatePicker, Select, Row, Col, Space, Table, Empty, Radio, InputNumber, } from "antd";
 import { CompassOutlined } from "@ant-design/icons";
import moment from "moment";
import "moment/locale/zh-cn";

const Demo = (props) => {
  // 提交表单
  const onFinish = (val) => {
    console.log(val);//val中获取表单字段内容
  };
  const value = {
    name: "longs",
    date: "2022-11-05 21:19:08",
    bumen: "软件集成部",
    sex:0
  };
  const [form] = Form.useForm(); // 设置表单对象
  
  //重置表单
  const resetHandle=()=>{
    form.resetFields()
  }

  useEffect(() => {
    value.date = moment(value.date);
    // 设置表单字段
    form.setFieldsValue(value);
    //获取表单字段
    const fvalue=form.getFieldsValue()
    fvalue.date=moment(fvalue.date).format('YYYY-MM-DD HH:mm:ss')
    console.log(fvalue)
  });
  return (
    <div style={{ background: "#fff", padding: "10px" }}>
      <Form onFinish={onFinish} layout="horizontal" form={form} >
        <Form.Item label="名称" name="name" rules={[{ required: true, message: '不填不行啊' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="日期" name="date" rules={[{ required: true, message: '不填不行啊' }]} >
          <DatePicker showTime />
        </Form.Item>
        <Form.Item label="部门" name="bumen" required>
          <Select allowClear>
            <Select.Option value="销售部">销售部</Select.Option>
            <Select.Option value="软件集成部">软件集成部</Select.Option>
            <Select.Option value="人事部">人事部</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="性别" name="sex">
          <Radio.Group label="性别">
            <Radio value={1}>男</Radio>
            <Radio value={0}>女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item>
          <Button type="primary" ghost htmlType="submit">
            <CompassOutlined></CompassOutlined>提交
          </Button>
          <Button onClick={resetHandle}>重置</Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default Demo;