首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在react js中添加/删除div on button click

在React.js中添加/删除div的方法是通过操作组件的状态来实现。以下是一个示例代码,演示了如何在React.js中添加/删除div。

首先,创建一个React组件,包含一个按钮和一个div列表。每个div都有一个删除按钮,点击删除按钮时会删除对应的div。

代码语言:txt
复制
import React, { useState } from 'react';

const App = () => {
  const [divList, setDivList] = useState([]);

  const addDiv = () => {
    const newDivList = [...divList];
    newDivList.push(<div>这是一个新的div</div>);
    setDivList(newDivList);
  };

  const removeDiv = (index) => {
    const newDivList = [...divList];
    newDivList.splice(index, 1);
    setDivList(newDivList);
  };

  return (
    <div>
      <button onClick={addDiv}>添加div</button>
      {divList.map((div, index) => (
        <div key={index}>
          {div}
          <button onClick={() => removeDiv(index)}>删除</button>
        </div>
      ))}
    </div>
  );
};

export default App;

在上面的代码中,我们使用了React的useState钩子来创建一个状态变量divList,用于存储div列表。初始时,divList为空数组。

当点击"添加div"按钮时,addDiv函数会创建一个新的div元素,并将其添加到divList中。为了避免直接修改原始状态变量,我们使用了扩展运算符...来创建一个新的数组。

当点击某个div的"删除"按钮时,removeDiv函数会根据索引从divList中删除对应的div元素。

最后,我们使用map函数遍历divList,渲染每个div和对应的"删除"按钮。

这样,当你在React.js中点击"添加div"按钮时,会动态添加一个新的div,并且每个div都有一个"删除"按钮,可以删除对应的div。

请注意,上述代码仅为示例,实际项目中可能需要根据具体需求进行修改和优化。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。了解更多信息,请访问腾讯云云服务器(CVM)
  • 腾讯云云函数(SCF):无服务器计算服务,可让您以事件驱动的方式运行代码,无需管理服务器。了解更多信息,请访问腾讯云云函数(SCF)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券