Antd v4 Form的众多使用方式，你需要知道的知识！

2024-01-23 18:23:16

Antd v4 Form的使用方式

Antd v4 Form提供了三种不同的使用方式，包括受控组件、非受控组件和getFieldDecorator装饰器。

受控组件

受控组件是指组件的状态由Form组件完全控制。在这种情况下，组件的输入值将由Form组件管理，并且Form组件将负责处理输入值的验证和提交。受控组件的使用方式如下：

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

const MyForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Username:', username);
    console.log('Password:', password);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="Username">
        <Input value={username} onChange={(e) => setUsername(e.target.value)} />
      </Form.Item>
      <Form.Item label="Password">
        <Input.Password value={password} onChange={(e) => setPassword(e.target.value)} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

非受控组件

非受控组件是指组件的状态由组件自身管理。在这种情况下，组件的输入值将由组件自身的state管理，并且组件将负责处理输入值的验证和提交。非受控组件的使用方式如下：

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

const MyForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    console.log('Username:', form.querySelector('input[name="username"]').value);
    console.log('Password:', form.querySelector('input[name="password"]').value);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="Username">
        <Input name="username" value={username} onChange={(e) => setUsername(e.target.value)} />
      </Form.Item>
      <Form.Item label="Password">
        <Input.Password name="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

getFieldDecorator装饰器

getFieldDecorator装饰器是一种特殊类型的装饰器，它可以将组件的输入值与Form组件关联起来。这意味着，组件的输入值将由Form组件管理，并且Form组件将负责处理输入值的验证和提交。getFieldDecorator装饰器的使用方法如下：

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

const MyForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Username:', username);
    console.log('Password:', password);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="Username">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Please input your username!' }],
        })(<Input value={username} onChange={(e) => setUsername(e.target.value)} />)}
      </Form.Item>
      <Form.Item label="Password">
        {getFieldDecorator('password', {
          rules: [{ required: true, message: 'Please input your password!' }],
        })(<Input.Password value={password} onChange={(e) => setPassword(e.target.value)} />)}
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;