用react 点击 全部删除 stars: ["胡歌", "肖战", "尼英奇", "坤哥", "龙哥"], 就把这些删去
时间: 2023-09-05 07:07:52 浏览: 147
可以使用React的状态管理功能来实现这个功能。具体实现步骤如下:
1. 在组件的state中定义stars数组。
2. 在render()方法中使用map()函数遍历stars数组,并渲染出每一个元素。
3. 在组件中添加一个按钮,当点击按钮时,调用一个删除stars数组中所有元素的函数。
4. 在删除stars数组中所有元素的函数中,使用setState()方法将stars数组设置为空数组。
下面是示例代码:
```
import React, { Component } from 'react';
class StarsList extends Component {
constructor(props) {
super(props);
this.state = {
stars: ["胡歌", "肖战", "尼英奇", "坤哥", "龙哥"]
};
}
handleDeleteAll = () => {
this.setState({ stars: [] });
};
render() {
return (
<div>
<ul>
{this.state.stars.map((star, index) => (
<li key={index}>{star}</li>
))}
</ul>
<button onClick={this.handleDeleteAll}>全部删除</button>
</div>
);
}
}
export default StarsList;
```
在上面的代码中,我们在构造函数中初始化了stars数组,并在render()方法中使用map()函数遍历stars数组,渲染出每一个元素。同时,我们添加了一个按钮,当点击按钮时,调用handleDeleteAll()函数,该函数使用setState()方法将stars数组设置为空数组,从而删除了所有元素。
阅读全文