React 表单组件技巧：Form.Item 深度剖析

2023-12-22 21:01:07

深入剖析 Form.Item：在 React 中构建高效表单

Form.Item：构建表单的基石

在 React 中构建表单时，Form.Item 组件无疑是不可或缺的元素。它为开发人员提供了强大的功能，使他们能够轻松创建和管理各种表单控件，实现数据的收集和验证。本文将深入探究 Form.Item 组件，揭示其特性、用法和最佳实践，帮助开发人员掌握表单开发的精髓，构建出高效、美观、用户友好的表单。

Form.Item 的基本用法

使用 Form.Item 非常简单，只需将其包裹在 Form 组件内即可。Form.Item 支持多种属性，包括：

label： 表单控件的标签
name： 表单控件的名称
value： 表单控件的初始值
onChange： 表单控件值变化的事件处理函数

import { Form, FormItem, Input } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
    >
      <FormItem
        label="Username"
        name="username"
      >
        <Input />
      </FormItem>
      <FormItem
        label="Password"
        name="password"
      >
        <Input.Password />
      </FormItem>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

value 和 onChange：管理表单控件

value 属性用于设置表单控件的初始值。onChange 函数用于处理表单控件值的变化。

value： 设置表单控件的初始值。如果未指定，控件将不显示任何值。
onChange： 在控件值发生变化时调用，并将当前值作为参数传递。

import { Form, FormItem, Input, Button } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  const onUsernameChange = (e) => {
    console.log('Username changed:', e.target.value);
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
    >
      <FormItem
        label="Username"
        name="username"
        value="initial_username"
        onChange={onUsernameChange}
      >
        <Input />
      </FormItem>
      <FormItem
        label="Password"
        name="password"
      >
        <Input.Password />
      </FormItem>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>  
);
};

export default MyForm;