У меня есть этот компонент, который добавляет div и его элементы к dom при нажатии кнопки. Часть добавления работает нормально, как и ожидалось, но проблема возникает, когда я хочу удалить.

Прямо сейчас, когда я нажимаю кнопку удаления, он удаляет элемент, но не удаляет тот конкретный элемент, с которым связана кнопка. Он просто удаляет div сверху или снизу.

Я пытался удалить этот конкретный div, кнопка которого была нажата для удаления. Как я могу этого добиться?

Вот CodeSandbox.

А вот код:

import { useState } from "react";

const App = () => {

  const [ counter, setCounter ] = useState( 1 );

  const handleAddDiv = () => {
    setCounter( counter + 1 );
  };

  const handleRemoveDiv = () => {
    setCounter( counter - 1 );
  };

  return (
    <div className="App">

      {
        Array.from(Array( counter )).map(( item, idx ) => (
           <div>
             <div>
               <input type="text" />
               <button onClick={handleRemoveDiv}>Remove</button>
             </div>
           </div>
        ))
      }

      <button onClick={handleAddDiv}>Add</button>

    </div>
  );
}
export default App;
0
Zak 22 Сен 2021 в 18:45

2 ответа

Лучший ответ

Это не предпочтительный способ реагирования, но он будет работать:

import "./styles.css";

import { useState } from "react";

const App = () => {
  const [counter, setCounter] = useState(1);

  const handleAddDiv = () => {
    setCounter(counter + 1);
  };

  const removeNode = (idx) => document.getElementById(`id-${idx}`).remove();

  return (
    <div className="App">
      {Array.from(Array(counter)).map((item, idx) => (
        <div key={idx} id={`id-${idx}`}>
          <div>
            <input type="text" />
            <button onClick={() => removeNode(idx)}>Remove</button>
          </div>
        </div>
      ))}

      <button onClick={handleAddDiv}>Add</button>
    </div>
  );
};

export default App;

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

-1
Damian Busz 22 Сен 2021 в 15:54

Я бы использовал состояние массива вместо состояния счетчика, потому что в противном случае вы не знаете, какой элемент нужно удалить.

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

let counter = 1;
export default function App() {
  const [array, setArray] = useState([0]);

  const handleAddDiv = () => {
    setArray((prev) => [...prev, counter++]);
  };

  const handleRemoveDiv = (idx) => {
    var arrayCopy = [...array];
    arrayCopy.splice(idx, 1);//remove the the item at the specific index
    setArray(arrayCopy);
  };

  return (
    <div className="App">
      {array.map((item, idx) => (
        <div key={item}>
          <div>
            <input type="text" />
            <button onClick={()=>handleRemoveDiv(idx)}
            >Remove</button>
          </div>
        </div>
      ))}
      <button onClick={handleAddDiv}>Add</button>
    </div>
  );
}

Когда я добавляю новый элемент, я даю ему значение counter++, потому что я буду использовать его как ключ, а ключ должен быть уникальным.

0
Dharman 22 Сен 2021 в 16:10