列表项目触击反应

Question

我在React中有一个todolist，我可以删除todo-s，但是我想对完成的todos应用清除。之后，将它们列为已完成将是非常好的。这怎么可能？我应该在我的代码中更改什么？我试图使用数组中的对象，但这会导致diff，erros。

import React, { Component } from 'react'; 


class ToDoList extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     list: [], 
     items: '' 
     }; 
    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleRemove = this.handleRemove.bind(this); 

    } 

    handleChange(event) { 
    this.setState({items: event.target.value}) 
    console.log(event.target.value); 
    } 

    handleSubmit(event) { 
    this.setState({ 
     list: [...this.state.list, this.state.items], 
     items: '' 
    }) 
    event.preventDefault(); 
    } 


    handleRemove(index) { 
    const filteredArray = this.state.list.filter((_, i) => i !== index); // used underscore as a convention to address nothing is going there 
    this.setState({ 
     list: filteredArray 
    }); 
    } 

    render() { 
    return (
    <div className='header main'> 
     <form onSubmit={this.handleSubmit} > 
     <label> 
      <input className='new-todo' 
      placeholder='What needs to be done?' 
      type="text" 
      value={this.state.items} 
      onChange={this.handleChange} /> 
     </label> 
     </form> 
     <ul className='todo-list'> 
     {this.state.list.map((item, index) => (
      <li className='list-view' key={index+1}>{item}<button className='list-view-button' onClick={this.handleRemove.bind(this, index) }>X</button></li> 
     ))} 
     </ul> 
     <div className='footer'> 
     Remaining: {this.state.list.length} 
     </div> 
     </div> 
    ); 
    } 
} 

export default ToDoList; 

Answer 1

那么目前你只有一个表示待办事项的字符串数组。现在

items: [ { desc: "todo content", status: "new" }, { desc: "todo content", status: "completed" }, { desc: "todo content", status: "archived" } ];

当您完成待办事项循环，可以检查适用于不同设计的显示状态：

，我会为你的项目状态做到这一点。

或者你可以过滤待办事项，为特定状态， 即：

this.state.items.filter(item => item.status==="new")

这会给你只有“新”待办事项。