В этой записи блога мы углубимся в работу со значениями по умолчанию во входных списках с использованием библиотеки Ant Design (antd). Входные данные списка обычно используются в формах для обработки нескольких значений. Установка значений по умолчанию необходима для обеспечения лучшего взаимодействия с пользователем и оптимизации процесса отправки формы. Мы рассмотрим различные методы достижения этой цели с примерами кода, иллюстрирующими каждый подход.

Метод 1: инициализация значений по умолчанию в состоянии
Один простой способ установить значения по умолчанию для входных данных списка — это инициализировать состояние желаемыми значениями по умолчанию. Вот пример использования перехватчиков React:

import React, { useState } from 'react';
import { Input } from 'antd';
const MyForm = () => {
  const [values, setValues] = useState(['default value 1', 'default value 2']);
  const handleChange = (index, value) => {
    const updatedValues = [...values];
    updatedValues[index] = value;
    setValues(updatedValues);
  };
  const renderInputs = () => {
    return values.map((value, index) => (
      <Input
        key={index}
        value={value}
        onChange={(e) => handleChange(index, e.target.value)}
      />
    ));
  };
  return <div>{renderInputs()}</div>;
};
export default MyForm;

Метод 2: использование useEffect для установки значений по умолчанию.
Другой подход — использовать хук useEffectдля установки значений по умолчанию после монтирования компонента. Этот метод позволяет получать значения по умолчанию из API или выполнять любую другую асинхронную логику. Вот пример:

import React, { useState, useEffect } from 'react';
import { Input } from 'antd';
const MyForm = () => {
  const [values, setValues] = useState([]);
  useEffect(() => {
    // Fetch default values from an API
    const fetchDefaultValues = async () => {
      const response = await fetch('https://api.example.com/default-values');
      const data = await response.json();
      setValues(data);
    };
    fetchDefaultValues();
  }, []);
  const handleChange = (index, value) => {
    const updatedValues = [...values];
    updatedValues[index] = value;
    setValues(updatedValues);
  };
  const renderInputs = () => {
    return values.map((value, index) => (
      <Input
        key={index}
        value={value}
        onChange={(e) => handleChange(index, e.target.value)}
      />
    ));
  };
  return <div>{renderInputs()}</div>;
};
export default MyForm;

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

import React from 'react';
import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const onFinish = (values) => {
    console.log('Form values:', values);
  };
  return (
    <Form onFinish={onFinish} initialValues={{ inputs: ['default value 1', 'default value 2'] }}>
      <Form.List name="inputs">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item key={field.key} {...field}>
                <Input />
              </Form.Item>
            ))}
            <Button onClick={() => add()}>Add Input</Button>
          </>
        )}
      </Form.List>
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};
export default MyForm;

Установку значений по умолчанию для входных данных списка в Ant Design можно выполнить различными методами. Инициализируя состояние, используя useEffect или Form InitialValues, вы можете предоставить значения по умолчанию, чтобы улучшить взаимодействие с пользователем и упростить отправку форм. Выбор подходящего метода зависит от конкретных требований вашего проекта.

Реализуя эти методы, вы можете обеспечить удобство взаимодействия пользователей со списками в ваших формах Ant Design.

Не забудьте протестировать и адаптировать эти методы в соответствии с вашим конкретным вариантом использования для достижения желаемой функциональности.