Ant.design 4.0 表单实例(Instance)Form

form表单的使用再寻常不过，好的使用方法能使你少写很多代码，github也有很多的方案，本人对antd form的使用要求也不高。

受控组件

最常用的方法就是把form组件改成受控组件

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';


const FormPage = (props) => {

  // const [formValue, setFromValue] = useState({
  //   username: "2",
  //   password: ""
  // });

  const [username, setUsernname] = useState("1");
  const [password, setPassword] = useState("");

  const handleSubmit = () => {
    console.log(username, password)
    //这里能够打印出正确的username, password
  }
  return (
    <div style={{width: "400px", height: '400px', margin: "100px auto", boxShadow: "0 0 10px #000", padding: '10px'}}>
      <Form 
      >
        <Form.Item name="username" label="username">
          <Input placeholder="please input username" value={username} onChange={e => setUsernname(e.target.value)}></Input>
        </Form.Item>
        <Form.Item name="password" label="password">
          <Input placeholder="please input password" value={password} onChange={e => setPassword(e.target.value)}></Input>
        </Form.Item>
        <Button onClick={handleSubmit}>提交</Button>
      </Form>
    </div>
  )
}


export default FormPage;

用Form的initialValues

上面的使用方法如果表单组件非常的多，那样一个一个的写就能把人写的...
可以使用Form上面的initialValues, 以及它上面的onValuesChange来进行数据的修改以及绑定

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';


const FormPage = (props) => {

  const [formValue, setFromValue] = useState({
    username: "2",
    password: ""
  });
  const handleChangeForm = (fields) => {
  //这里使用ES6的展开对象运算符来覆盖对象进行改变值
    setFromValue({
      ...formValue,
      ...fields
    });
    //这里也能正确的修改和得到值
  }
  const handleSubmit = () => {
    console.log(formValue)
  }
  return (
    <div style={{width: "400px", height: '400px', margin: "100px auto", boxShadow: "0 0 10px #000", padding: '10px'}}>
      <Form 
        initialValues={formValue}
        onValuesChange={handleChangeForm}
      >
        <Form.Item name="username" label="username">
          <Input placeholder="please input username"></Input>
        </Form.Item>
        <Form.Item name="password" label="password">
          <Input placeholder="please input password"></Input>
        </Form.Item>
        <Button onClick={handleSubmit}>提交</Button>
      </Form>
    </div>
  )
}


export default FormPage;

Form.Item校验数据

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';


const FormPage = (props) => {


  const [form] = Form.useForm();  //创建表单实例
  const [formValue, setFromValue] = useState({
    username: "2",
    password: ""
  });
  const handleChangeForm = (fields) => {
    setFromValue({
      ...formValue,
      ...fields
    });
  }

  const handleChecked = async () => {
    const { validateFields } = form;
    const value = await validateFields();
    //这里进行校验
    if(value.length > 0) {

    }
  }
  const handleSubmit = () => {
    handleChecked();
  }
  return (
    <div style={{width: "400px", height: '400px', margin: "100px auto", boxShadow: "0 0 10px #000", padding: '10px'}}>
      <Form 
        initialValues={formValue}
        onValuesChange={handleChangeForm}
        form={form}  //用书获取表单实例
      >
        {/* 正则校验 */}
        <Form.Item name="username" label="username"
          rules={[{
            required: true,
            pattern: /^[^`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/im,
            message: "不可包含特殊符号"
          }]}
        >
          <Input placeholder="please input username"></Input>
        </Form.Item>
        {/* 方法校验 */}
        <Form.Item name="password" label="password"
          
        >
          <Input placeholder="please input password"></Input>
        </Form.Item>
        <Button onClick={handleSubmit}>提交</Button>
      </Form>
    </div>
  )
}


export default FormPage;

From实例的一些方法

antd获取表单的值除了一个一个的绑定成受控组件或者非受控组件的方法来获取每个控件的值，查看antd文档发现表单项的值不能通过设置状态来更新,可以使用表单实例的setFieldsValue

• getFieldsValue 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值，或者getFieldsValue(["username", "password"])来获取特定的值
• getFieldValue 获取对应字段名的值getFieldValue("passowrd")
• setFieldsValue 设置表单的值setFieldsValue({"password": "danceli"})，此方法没有返回值
• validateFields 触发表单验证

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';


const FormPage = (props) => {


  const [form] = Form.useForm();  //创建表单实例
  const [formValue, setFromValue] = useState({
    username: "2",
    password: ""
  });
  const handleChangeForm = (fields) => {
    setFromValue({
      ...formValue,
      ...fields
    });
  }

  const handleChecked = async () => {
    const { validateFields, getFieldsValue, getFieldValue, setFieldsValue } = form;

    const values = getFieldsValue();    //得到所有的表单字段值
    const pass = getFieldValue('password');   //得到password对应的所有字段值
    setFieldsValue({"password": "dancelisss"})  //设置name为password的Form.Item控件对应的值
    console.log(values, pass)   
  }
  const handleSubmit = () => {
    handleChecked();
  }
  return (
    <div style={{width: "400px", height: '400px', margin: "100px auto", boxShadow: "0 0 10px #000", padding: '10px'}}>
      <Form 
        initialValues={formValue}
        // onValuesChange={handleChangeForm}
        form={form}  //用书获取表单实例
      >
        {/* 正则校验 */}
        <Form.Item name="username" label="username"
          rules={[{
            required: true,
            pattern: /^[^`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/im,
            message: "不可包含特殊符号"
          }]}
        >
          <Input placeholder="please input username"></Input>
        </Form.Item>
        {/* 方法校验 */}
        <Form.Item name="password" label="password"
          rules={[{
            required: true,
            message: "对密码进行验证"
          }]}
        >
          <Input placeholder="please input password"></Input>
        </Form.Item>
        <Button onClick={handleSubmit}>提交</Button>
      </Form>
    </div>
  )
}


export default FormPage;