91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

React中怎么動態添加和刪除元素

小億
139
2024-01-19 17:33:29
欄目: 編程語言

在React中,可以通過使用狀態來動態添加和刪除元素。

要動態添加元素,可以在組件的狀態中定義一個數組,然后使用setState方法來更新數組。例如,假設有一個組件需要動態添加一個列表項:

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是一個狀態數組,addItem函數用于在點擊按鈕時向list數組中添加一個新的項。在渲染部分,使用map方法遍歷list數組來生成列表項。

要動態刪除元素,可以通過使用filter方法來過濾掉需要刪除的元素。例如,假設有一個組件需要動態刪除一個列表項:

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函數接受一個索引參數,然后使用filter方法來過濾掉對應索引的項,更新list數組。在渲染部分,每個列表項后面都有一個刪除按鈕,點擊按鈕時調用removeItem函數,并傳入對應的索引。

0
关岭| 泗水县| 镇平县| 抚顺市| 潞城市| 泗洪县| 汾西县| 县级市| 田林县| 徐水县| 遵化市| 白河县| 竹山县| 平远县| 兴隆县| 南靖县| 迭部县| 泰顺县| 东辽县| 乐至县| 青海省| 丹阳市| 汉川市| 弥勒县| 双江| 石河子市| 青河县| 梁河县| 堆龙德庆县| 芷江| 汉寿县| 安顺市| 海南省| 平远县| 兰考县| 乌拉特前旗| 同德县| 千阳县| 洛隆县| 虎林市| 兴义市|