在之前的版本中一般使用类组件this.setState
修改数据更新视图,在最新的版本中,react推荐使用函数组件,函数组件里面是没有this
的,所以需要使用Hook
import { Button } from "antd"
import { useState } from "react"
export default function Role() {
const [list, setList] = useState([
{
id: 1,
name: 'zhangsan'
},
{
id: 2,
name: 'lisi'
},
{
id: 3,
name: 'wangwu'
}
])
// 添加
const handAdd = () => {
setList([...list, {
id: list.length + 1,
name: 'xxxx'
}])
}
// 删除
const handClick = (item, index) => {
// setList(list.filter(i => i.id !== list[item].id))
// or 一般直接使用上面这种方式就可以,要是上面这种方法无效可以试试下面的方法
let data = list
data.splice(item, 1)
setList([...data])
}
return (
<div>
<Button onClick={handAdd}>添加</Button>
<RoleFrom list={list} handClick={handClick} />
</div>
)
}
// 子组件
function RoleFrom(props) {
return (
<ul>
{
props.list.map((item, index) => {
return <li key={item.id} onClick={props.handClick.bind(item, index)}>{item.name}</li>
})
}
</ul>
)
}
添加后的效果