React中怎么動(dòng)態(tài)添加和刪除元素

小億
177
2024-01-19 17:33:29

在React中，可以通過(guò)使用狀態(tài)來(lái)動(dòng)態(tài)添加和刪除元素。

要?jiǎng)討B(tài)添加元素，可以在組件的狀態(tài)中定義一個(gè)數(shù)組，然后使用setState方法來(lái)更新數(shù)組。例如，假設(shè)有一個(gè)組件需要?jiǎng)討B(tài)添加一個(gè)列表項(xiàng)：

import React, { useState } from 'react';

function MyComponent() {
  const [list, setList] = useState([]);

  const addItem = () => {
    setList([...list, 'New Item']);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

上述代碼中，list是一個(gè)狀態(tài)數(shù)組，addItem函數(shù)用于在點(diǎn)擊按鈕時(shí)向list數(shù)組中添加一個(gè)新的項(xiàng)。在渲染部分，使用map方法遍歷list數(shù)組來(lái)生成列表項(xiàng)。

要?jiǎng)討B(tài)刪除元素，可以通過(guò)使用filter方法來(lái)過(guò)濾掉需要?jiǎng)h除的元素。例如，假設(shè)有一個(gè)組件需要?jiǎng)討B(tài)刪除一個(gè)列表項(xiàng)：

import React, { useState } from 'react';

function MyComponent() {
  const [list, setList] = useState(['Item 1', 'Item 2', 'Item 3']);

  const removeItem = (index) => {
    setList(list.filter((item, i) => i !== index));
  };

  return (
    <div>
      <ul>
        {list.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

上述代碼中，removeItem函數(shù)接受一個(gè)索引參數(shù)，然后使用filter方法來(lái)過(guò)濾掉對(duì)應(yīng)索引的項(xiàng)，更新list數(shù)組。在渲染部分，每個(gè)列表項(xiàng)后面都有一個(gè)刪除按鈕，點(diǎn)擊按鈕時(shí)調(diào)用removeItem函數(shù)，并傳入對(duì)應(yīng)的索引。

0 踩