列表項目觸擊反應

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")

這會給你只有「新」待辦事項。