Блог

Я хочу поместить элемент в список, если он ранее не был туда включен. Если он есть, удалите этот элемент. Я могу выполнить первую часть, но понятия не имею, как это удалить.

  handleCityCheckbox = (param1) => {
    var { cityList = [] } = this.state;
      //if cityList doesnt have param1
    if (!cityList.includes(param1)) {
      cityList.push(param1);
      this.setState({ cityList });
    } else  {
      
    }
    this.setState({ cityList });
  };
 

какой будет часть else?

 handleCityCheckbox = (param1) => {
    const { cityList = [] } = this.state;
    const itemIndex = cityList.indexOf(param1);
    if (itemIndex === -1)) {
      cityList.push(param1);
    } else  {
      cityList = cityList.filter((e, index) => index !== itemIndex)
    }
    this.setState({ cityList });
  };
 

Готовое приложение:

Функция фильтрации:

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!name) {
      alert("Enter the city name");
      return;
    }
    let tempList = cities.filter(
      (city) => city.toLowerCase() !== name.toLowerCase()
    );

    if (tempList.length === cities.length) {
      tempList.push(name);
      setCities(tempList);
      return;
    } else {
      setCities(tempList);
    }
  };
 

В приведенной выше функции мы, прежде всего, будем использовать filter функцию для фильтрации, т.Е. Удаляем название города, если оно существует, и присваиваем его tempList , затем сравниваем размер tempList с основным cities списком, если он такой же, то это указывает на то, что название города отсутствовало в основном списке, поэтому мыпереместит его name tempList и обновит cities состояние на измененное tempList , иначе мы просто установим отфильтрованное tempList .

Полный пример :

 
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [cities, setCities] = useState(["Pune", "Delhi"]);
  const [name, setName] = useState("");
  const handleSubmit = (event) => {
    event.preventDefault();
    if (!name) {
      alert("Enter the city name");
      return;
    }
    let tempList = cities.filter(
      (city) => city.toLowerCase() !== name.toLowerCase()
    );

    if (tempList.length === cities.length) {
      tempList.push(name);
      setCities(tempList);
      return;
    } else {
      setCities(tempList);
    }
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input onChange={(event) => setName(event.target.value)} />
        <button type="submit">Submit</button>
      </form>
      {cities.map((city) => (
        <p>{city}</p>
      ))}
    </div>
  );
}

 

Ссылка на Codesandbox