### 回答1：
可以使用
React 中的状态来实现点击一次按钮
删除一个 div 的功能。具体实现步骤如下：
1. 在组件的状态
中添加一个
数组，用于存储要
删除的 div 的索引。
2. 在点击按钮的事件处理函数
中，将要
删除的 div 的索引添加到状态
数组中。
3. 使用 Array.filter() 方法过滤掉要
删除的 div，然后将过滤后的
数组更新到组件的状态
中。
4. 在 render() 方法
中使用 map() 方法遍历状态
数组，动态生成 div，并给每个 div 绑定一个
删除按钮的点击事件处理函数，用于
删除该 div。
以下是示例代码：
```jsx
import
React, { useState } from '
react';
function App() {
const [divs, setDivs] = useState([]);
const handleDelete = (index) => {
setDivs([...divs, index]);
};
const handleRemove = (index) => {
setDivs(divs.filter((i) => i !== index));
};
return (
<div>
<button onClick={() => handleDelete(divs.length)}>添加 div</button>
{Array.from({ length: divs.length }, (_, i) => i).map((i) => (
<div key={i}>
<p>这是第 {i + 1} 个 div</p>
<button onClick={() => handleRemove(i)}>
删除</button>
</div>
))}
</div>
);
}
export default App;
```
在上面的代码
中，我们使用 useState() 函数创建了一个名为 divs 的状态变量，它是一个
数组，用于存储要
删除的 div 的索引。
在 handleDelete() 函数
中，我们将要
删除的 div 的索引添加到 divs
数组中。
在 handleRemove() 函数
中，我们使用 Array.filter() 方法过滤掉要
删除的 div，然后将过滤后的
数组更新到 divs 状态变量
中。
在 render() 方法
中，我们使用 map() 方法遍历 divs
数组，动态生成 div，并给每个 div 绑定一个
删除按钮的点击事件处理函数，用于
删除该 div。
### 回答2：
要实现点击一次按钮
删除div，可以使用
React中的事件处理函数和状态管理。
首先，在
React组件的构造函数
中定义一个初始状态，例如：
```javascript
constructor(props) {
super(props);
this.state = {
isDivVisible: true
};
}
```
这里使用isDivVisible状态来表示div的可见性，true表示可见，false表示隐藏。
接下来，在render()函数
中根据isDivVisible状态来决定是否渲染div
元素：
```javascript
render() {
return (
<div>
{this.state.isDivVisible &&
<div>要
删除的内容</div>
}
<button onClick={this.handleButtonClick}>点击
删除div</button>
</div>
);
}
```
接着，定义点击按钮的事件处理函数handleButtonClick()，在该函数
中更新isDivVisible状态的值为false：
```javascript
handleButtonClick = () => {
this.setState({ isDivVisible: false });
}
```
当按钮被点击时，handleButtonClick()函数会被调用，修改isDivVisible的值为false，从而使div在页面上被
删除。
以上就是使用
React实现点击一次按钮
删除div的简单步骤。
### 回答3：
使用
React 删除 div 的过程可以分为以下几个步骤：
1. 在组件
中定义一个 state 来控制是否显示 div，初始化为 true。
```js
const [isDivVisible, setIsDivVisible] = useState(true);
```
2. 在 JSX
中根据 state 的值来决定是否渲染该 div。
```jsx
{isDivVisible && <div>要
删除的 div</div>}
```
3. 定义一个函数 handleDeleteDiv，用于处理点击按钮事件，当按钮被点击时，将 state 设置为 false。
```js
const handleDeleteDiv = () => {
setIsDivVisible(false);
};
```
4. 在点击按钮的地方，绑定 handleDeleteDiv 函数。
```jsx
<button onClick={handleDeleteDiv}>
删除 div</button>
```
完整的代码如下所示：
```jsx
import
React, { useState } from "
react";
const MyComponent = () => {
const [isDivVisible, setIsDivVisible] = useState(true);
const handleDeleteDiv = () => {
setIsDivVisible(false);
};
return (
<div>
{isDivVisible && <div>要
删除的 div</div>}
<button onClick={handleDeleteDiv}>
删除 div</button>
</div>
);
};
```
这样，点击按钮后，div 将从页面
中移除。
最低0.47元/天 解锁文章
2555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
