Кратко ръководство: Нулиране на входни стойности в Autocomplete на потребителския интерфейс на материала

ВЪВЕДЕНИЕ:

В това ръководство ще научите как да нулирате селекции и полета за въвеждане в компонента Autocomplete на 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. Извикайте Reset:
Във вашия манипулатор за изпращане на формуляри извикайте функцията 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

Заключение
Като следвате тези стъпки, можете безпроблемно да интегрирате функцията за изчистване в компонента Autocomplete на 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;