Наполнение формы Ant Design начальными значениями - Fcodenotes

Вы работаете с компонентом формы Ant Design и хотите начать его заново? В этой статье мы рассмотрим различные методы перезапуска и установки начальных значений в форме Ant Design. Итак, давайте углубимся и усовершенствуем вашу форму!

Метод 1: сброс формы

Самый простой способ перезапустить форму — вернуть ее в исходное состояние. Ant Design предоставляет встроенный метод resetFields, который очищает все поля и сбрасывает их значения. Вот пример:

import { Form, Button } from 'antd';
const MyForm = () => {
  const [form] = Form.useForm();
  const handleReset = () => {
    form.resetFields();
  };
  return (
    <Form form={form}>
      {/* Form fields go here */}
      <Button onClick={handleReset}>Reset</Button>
    </Form>
  );
};

Метод 2: установка начальных значений

Если вы хотите установить определенные начальные значения для полей формы, вы можете использовать свойство initialValues, предоставляемое компонентом FormAnt Design. Вот пример:

import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const [form] = Form.useForm();
  const initialValues = {
    name: 'John Doe',
    email: 'johndoe@example.com',
  };
  const handleReset = () => {
    form.resetFields();
  };
  return (
    <Form form={form} initialValues={initialValues}>
      <Form.Item name="name" label="Name">
        <Input />
      </Form.Item>
      <Form.Item name="email" label="Email">
        <Input />
      </Form.Item>

      <Button onClick={handleReset}>Reset</Button>
    </Form>
  );
};

Метод 3: установка значений полей вручную

В некоторых случаях вам может потребоваться установить значения полей программно, например, когда вам нужно асинхронно загружать данные. FormAnt Design предоставляет метод под названием setFieldsValue, который позволяет вам устанавливать значения для определенных полей. Вот пример:

import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const [form] = Form.useForm();
  const handleLoadData = async () => {
    const data = await fetchData(); // Some async data fetching
    form.setFieldsValue({
      name: data.name,
      email: data.email,
    });
  };
  const handleReset = () => {
    form.resetFields();
  };
  return (
    <Form form={form}>
      <Form.Item name="name" label="Name">
        <Input />
      </Form.Item>
      <Form.Item name="email" label="Email">
        <Input />
      </Form.Item>

      <Button onClick={handleLoadData}>Load Data</Button>
      <Button onClick={handleReset}>Reset</Button>
    </Form>
  );
};

Метод 4: Контролируемые поля

Другой подход — рассматривать поля формы как контролируемые компоненты. Сохраняя их значения в состоянии компонента, вы имеете полный контроль над их сбросом и обновлением. Вот пример:

import { useState } from 'react';
import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleReset = () => {
    setName('');
    setEmail('');
  };
  const handleSubmit = () => {
    // Handle form submission
  };
  return (
    <Form>
      <Form.Item name="name" label="Name">
        <Input value={name} onChange={(e) => setName(e.target.value)} />
      </Form.Item>
      <Form.Item name="email" label="Email">
        <Input value={email} onChange={(e) => setEmail(e.target.value)} />
      </Form.Item>

      <Button onClick={handleReset}>Reset</Button>
      <Button onClick={handleSubmit}>Submit</Button>
    </Form>
  );
};

Подведение итогов

В этой статье мы рассмотрели несколько методов перезапуска и установки начальных значений в форме Ant Design. Вы можете использовать метод resetFieldsдля сброса формы, свойство initialValuesдля установки начальных значений, метод setFieldsValueдля программного задания значений полей или обрабатывать поля формы как контролируемые компоненты. Выберите метод, который соответствует вашим потребностям и улучшит ваши навыки построения форм!

Не забывайте экспериментировать с этими методами в своих проектах и максимально эффективно использовать мощный компонент формы Ant Design.

Метод 1: сброс формы

import { Form, Button } from 'antd';
const MyForm = () => {
  const [form] = Form.useForm();
  const handleReset = () => {
    form.resetFields();
  };
  return (
    <Form form={form}>
      {/* Form fields go here */}
      <Button onClick={handleReset}>Reset</Button>
    </Form>
  );
};

Метод 2: установка начальных значений

import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const [form] = Form.useForm();
  const initialValues = {
    name: 'John Doe',
    email: 'johndoe@example.com',
  };
  const handleReset = () => {
    form.resetFields();
  };
  return (
    <Form form={form} initialValues={initialValues}>
      <Form.Item name="name" label="Name">
        <Input />
      </Form.Item>
      <Form.Item name="email" label="Email">
        <Input />
      </Form.Item>

      <Button onClick={handleReset}>Reset</Button>
    </Form>
  );
};

Метод 3: установка значений полей вручную

import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const [form] = Form.useForm();
  const handleLoadData = async () => {
    const data = await fetchData(); // Some async data fetching
    form.setFieldsValue({
      name: data.name,
      email: data.email,
    });
  };
  const handleReset = () => {
    form.resetFields();
  };
  return (
    <Form form={form}>
      <Form.Item name="name" label="Name">
        <Input />
      </Form.Item>
      <Form.Item name="email" label="Email">
        <Input />
      </Form.Item>

      <Button onClick={handleLoadData}>Load Data</Button>
      <Button onClick={handleReset}>Reset</Button>
    </Form>
  );
};

Метод 4: Контролируемые поля

import { useState } from 'react';
import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleReset = () => {
    setName('');
    setEmail('');
  };
  const handleSubmit = () => {
    // Handle form submission
  };
  return (
    <Form>
      <Form.Item name="name" label="Name">
        <Input value={name} onChange={(e) => setName(e.target.value)} />
      </Form.Item>
      <Form.Item name="email" label="Email">
        <Input value={email} onChange={(e) => setEmail(e.target.value)} />
      </Form.Item>

      <Button onClick={handleReset}>Reset</Button>
      <Button onClick={handleSubmit}>Submit</Button>
    </Form>
  );
};

Подведение итогов