본 절에서는 목록의 삭제 버튼 기능을 구현해 보겠습니다. 삭제 버튼을 클릭하면 삭제 여부를 묻는 팝업 창이 나타납니다. 클릭하면 삭제가 확정되고, 취소를 클릭하면 삭제되지 않습니다.
이전에 조상 구성 요소와 손자 구성 요소 간의 통신을 이미 작성했기 때문에 코드를 직접 작성합니다.
- 1. App 컴포넌트에서 데이터를 삭제하는 함수를 정의합니다.
export default class App extends Component {
// 定义列表的初始状态数据
state = {
todos: [
{
id:'001',name:'吃饭',done: true},
{
id:'002',name:'睡觉',done: true},
{
id:'003',name:'写代码',done: false},
]}
// 获取Header组件收集的任务项数据
addTodo = (todoObj) => {
const {
todos } = this.state
const newTodo = [todoObj, ...todos]
this.setState({
todos:newTodo})
}
// 更新状态数据
updateTodo = (id,done) => {
const {
todos } = this.state
const newTodos = todos.map(todoObj=>{
if (id === todoObj.id) return {
...todoObj,done}
return todoObj
})
this.setState({
todos:newTodos})
}
// 删除状态数据
deleteTodo = (id) => {
const {
todos } = this.state
const newTodos = todos.filter((todo)=>{
return todo.id !== id
})
this.setState({
todos: newTodos})
}
render() {
const {
todos } = this.state
return (
<div className="todo-container">
<div className="todo-wrap">
<Header addTodo={
this.addTodo}/>
<List todos={
todos} updateTodo={
this.updateTodo} deleteTodo={
this.deleteTodo}/>
<Footer/>
</div>
</div>
)
}
}
여기서 배열을 필터링하여id 삭제하려는 작업 항목을 필터링합니다.
- 2. List 구성 요소에서 이 속성을 받고 props 제한을 만듭니다.
export default class List extends Component {
// 对props做类型和必要性的限制
static propTypes = {
updateTodo: PropTypes.func.isRequired,
todos: PropTypes.array.isRequired,
deleteTodo: PropTypes.func.isRequired
}
render() {
const {
todos,updateTodo,deleteTodo } = this.props
return (
<ul className="todo-main">
{
todos.map(todo=>{
return <Item key={
todo.id} {
...todo} updateTodo={
updateTodo} deleteTodo={
deleteTodo} />
})
}
</ul>
)
}
}
- 3. Item 컴포넌트의 삭제 버튼에 클릭 이벤트를 추가합니다.
export default class Item extends Component {
// 初始化状态数据
state = {
mouseIn:false}
// 鼠标移入移出回调函数
mouseHandle = (flag) => {
this.setState({
mouseIn:flag})
}
// 更新任务项状态
checkHandle = (id,event) => {
this.props.updateTodo(id,event.target.checked)
}
// 删除任务项
deleteHandle = (id) => {
if(window.confirm('确定删除该任务吗？')) {
this.props.deleteTodo(id)
}
}
render() {
const {
id,name,done} = this.props
const {
mouseIn} = this.state
return (
<li onMouseEnter={
()=>this.mouseHandle(true)} onMouseLeave={
()=>this.mouseHandle(false)} style={
{
backgroundColor: mouseIn?'gainsboro':''}}>
<label>
<input type="checkbox" defaultChecked={
done} onChange={
event=>this.checkHandle(id,event)}/>
<span>{
name}</span>
</label>
<button onClick={
()=>this.deleteHandle(id)} className="btn btn-danger" style={
{
display:mouseIn?"block":"none"}}>删除</button>
</li>
)
}
}
- 마지막으로 효과를 살펴보겠습니다
지금까지 Todolist의 삭제 기능을 구현했습니다.