ReactAntd(十七) React-表单重置赋值默认值占位

Antd 表单重置赋值占位

表单 Label 占位

• labelCol 就是 label 占位

• wrapperCol 就是 input 内容占位

import { Form } from 'antd'
function useLabel() {
  // form 最后就是控制整个表单
  const [form] = Form.useForm()
  const onFinish = (values) => {
    console.log('Received values of form: ', values)
  }
  //指定宽度
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 12 },
    },
  }
  //占位
  return (
    <Form {...formItemLayout} form={form} name="register" onFinish={onFinish}>
      表单内容
    </Form>
  )
}

export default useLabel

表单重置

• form.resetFields()

import { Form } from 'antd'
function useLabel() {
  // form 最后就是控制整个表单
  const [form] = Form.useForm()
  const onFinish = (values) => {
    console.log('Received values of form: ', values)
  }
  //重置
  const onReset = () => {
    form.resetFields()
  }
  //指定宽度
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 12 },
    },
  }
  //占位
  return (
    <Form {...formItemLayout} form={form} name="register" onFinish={onFinish}>
      表单内容
    </Form>
  )
}

export default useLabel

表单赋值

• 填充字段属性对应的就是 Form.Item 里面对应的 name 值

• form.setFieldsValue

import { Form } from 'antd'
function useLabel() {
  // form 最后就是控制整个表单
  const [form] = Form.useForm()
  const onFinish = (values) => {
    console.log('Received values of form: ', values)
  }
  //填充赋值
  const onFill = () => {
    form.setFieldsValue({
      username: '23232@qq.com',
      password: '123456',
    })
  }
  //指定宽度
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 12 },
    },
  }
  //占位
  return (
    <Form {...formItemLayout} form={form} name="register" onFinish={onFinish}>
      表单内容
    </Form>
  )
}

export default useLabel

有的时候需要表单一上来就有默认值

<Form
  name="normal_login2"
  className="login-form"
  initialValues={{
    remember: true,
  }}
  onFinish={onFinish}
  form={form}
></Form>