Краткое руководство: сброс входных значений в автозаполнении Material-UI

ВВЕДЕНИЕ:

В этом руководстве вы узнаете, как сбросить выбор и поля ввода в компоненте автозаполнения Material-UI. Это улучшает взаимодействие с пользователем и взаимодействие, особенно после отправки формы или подобных событий.

ОБЗОР:

Шаг 1. Настройте среду разработки, установив Material-UI и связанные пакеты.
Шаг 2. Импортируйте компонент автозаполнения для использования.
Шаг 3. Реализуйте функцию очистки, инициализируя состояние, применив механизм очистки и вызвав сброс.
Вывод: Выполнив эти шаги, вы сможете легко интегрировать очистку функциональность для более плавного взаимодействия с пользователем.

ШАГИ:

Шаг 1. Создание среды:
Прежде чем углубляться в процесс реализации, убедитесь, что Material-UI правильно установлен в вашем проекте. Используйте npm или Yarn для установки необходимых пакетов:

npm install @mui/material @emotion/react @emotion/styled

Чтобы подтвердить успешную установку, проверьте свой package.json на наличие следующих сведений о пакете:

"dependencies": {
  "@emotion/react": "^**.**.*",
  "@emotion/styled": "^**.**.*",
  "@mui/material": "^**.**.**"
}

Шаг 2. Импортируйте компонент автозаполнения

import Autocomplete from '@mui/material/Autocomplete';

Шаг 3. Реализация четкой функциональности (последний этап)
1. Инициализация состояния:
Определите переменную состояния, которая будет изменена при вызове функции, ответственной за запуск процесса очистки:

const [resetInputField, setResetInputField] = useState(false);

2. Примените механизм очистки:
Вставьте переменную "resetInputField" в свойство "key" компонентов автозаполнения, предназначенных для очистки, как показано ниже:

        <div className="inputsWrapper">
          <>
            <Autocomplete
              disablePortal
              className="singleInput"
              id="tags-outlined"
              onChange={(e, option) => setUserInfo(e, option, "leastFavorite")}
              getOptionLabel={(option) => option.title}
              options={top100Films}
              key={resetInputField}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Least Favorites"
                  placeholder="Least Favorites"
                />
              )}
            />
          </>
          <>
            <Autocomplete
              disablePortal
              multiple
              onChange={(e, option) => setUserInfo(e, option, "favorites")}
              className="multipleSelect"
              id="tags-outlined"
              options={top100Films}
              getOptionLabel={(option) => option.title}
              key={resetInputField}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Favorites"
                  placeholder="Favorites"
                />
              )}
            />
          </>
        </div>

Примечание. Чтобы избежать ошибки «Обнаружено два дочерних элемента с одним и тем же ключом», убедитесь, что эти компоненты не являются прямыми братьями и сестрами. Поместите их в подходящий контейнер, например фрагмент или элемент div, как показано выше.

3. Вызов сброса:
Внутри обработчика отправки формы вызовите функцию setResetInputField, чтобы сбросить поля ввода, как показано ниже:

  // FUNCTION TO HANDLE FORM SUBMISSION
  const handleFormSubmission = async (event) => {
    event.preventDefault();
    setLoading(true);

    // API CALL SIMULATION
    try {
      setTimeout(() => {
        setLoading(false);
        setResetInputField((prev) => !prev);
      }, 2000);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  };
  // END OF FUNCTION TO HANDLE FORM SUBMISSION

Заключение
Выполняя эти шаги, вы сможете легко интегрировать функцию очистки в компонент автозаполнения Material-UI, обеспечивая более плавное взаимодействие с пользователем. Ваши поля ввода будут сброшены по мере необходимости после отправки формы.

Бонус: полный код для справки:

import { useState } from "react";
import "./App.css";
import { Autocomplete, TextField } from "@mui/material";

function App() {
  // LOADING STATE WHEN FORM IS SUBMITTED
  const [loading, setLoading] = useState(false);

  // VARIABLE TO RESET INPUT FIELDS AFTER FORM SUBMISSION
  const [resetInputField, setResetInputField] = useState(false);

  // OPTIONS ARRAY
  const top100Films = [
    { title: "The Shawshank Redemption", year: 1994 },
    { title: "The Godfather", year: 1972 },
    { title: "The Godfather: Part II", year: 1974 },
    { title: "The Dark Knight", year: 2008 },
    { title: "12 Angry Men", year: 1957 },
    { title: "Schindler's List", year: 1993 },
    { title: "Pulp Fiction", year: 1994 },
    {
      title: "The Lord of the Rings: The Return of the King",
      year: 2003,
    }
  ];


  // FUNCTION TO HANDLE FORM SUBMISSION
  const handleFormSubmission = async (event) => {
    event.preventDefault();
    setLoading(true);

    // API CALL SIMULATION
    try {
      setTimeout(() => {
        setLoading(false);
        setResetInputField((prev) => !prev);
      }, 2000);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  };
  // END OF FUNCTION TO HANDLE FORM SUBMISSION


  const setUserInfo = (e, data, type) => {
    console.log(e, data, type);
  };

  return (
    <div className="formWrapper">
      <form className="form" onSubmit={handleFormSubmission}>
        <div className="inputsWrapper">
          <>
            <Autocomplete
              disablePortal
              className="singleInput"
              id="tags-outlined"
              onChange={(e, option) => setUserInfo(e, option, "leastFavorite")}
              getOptionLabel={(option) => option.title}
              options={top100Films}
              key={resetInputField}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Least Favorites"
                  placeholder="Least Favorites"
                />
              )}
            />
          </>
          <>
            <Autocomplete
              disablePortal
              multiple
              onChange={(e, option) => setUserInfo(e, option, "favorites")}
              className="multipleSelect"
              id="tags-outlined"
              options={top100Films}
              getOptionLabel={(option) => option.title}
              key={resetInputField}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Favorites"
                  placeholder="Favorites"
                />
              )}
            />
          </>
        </div>
        <button type="submit" className="submitFormBtn" disabled={loading}>
          Submit
        </button>
      </form>
    </div>
  );
}

export default App;