时间戳

首页 > 解决方案 > 我将如何在 React 的 Todolist 中完成列表项目？

reactjs - 我将如何在 React 的 Todolist 中完成列表项目？

问题描述

这是我的代码，我想在其中删除已完成的列表项。

export default class Todo extends Component{
    constructor(){
        super();
        this.state={
            text:"",
            todoList:[],
            strikeThrough:[]
        }
    }

我只是对如何在反应组件中使用 line through 的 css 属性以及如何更新该特定索引感到困惑。

doneTodo=index => ()=>{
    const list3=[...this.state.todoList];
    this.setState({todoList:list3})
};

render() {
    let {text,todoList}=this.state;
    return(
            <div className="App-header">
                <div className="childApp">
                <h1 style={{textAlign: "center"}}>To-Do APP!</h1>
            <h3>You have {todoList.length} Todos</h3>
            <br/>
            <ul className="list-group">
                {todoList.map((val,index) => {
                    return (
                        <div className="mytodo">
                            <li className="list-group-item">
          <span classname="spname"> {val} </span>
          <button type="button" onClick={this.doneTodo} className="btn btn-default btn-s pull-right remove-item">Done</button>
              <button key={index} id={index} class="btn btn-default btn-s pull-right remove-item" onClick={this.delTodo(index)}>
          <span className="glyphicon glyphicon-remove"></span>
        </button>
         </li>

标签： reactjs

解决方案

最简单的方法（不是唯一的方法），以及我推荐你的方法，因为你看起来像一个反应初学者是这样的：

由于您似乎已经mytodo为所有待办事项创建了一个类，请将以下 CSS 选择器添加到您的样式表中：

.mytodo .done {
    text-decoration: line-through;
}

现在您需要做的是将课程添加done到您已完成的所有待办事项中。

为此，我建议您稍微更改一下代码结构，主要是通过向isDone您的 todo 对象添加一个属性而不是使用两个数组。

现在您需要像这样有条件地渲染 css 类：

<div className=`myTodo ${todo.isDone ? 'done' : ''}`>
...
</div>

现在唯一要做的就是切换isDone每个 todo 对象的属性。为此，您可以编写如下函数：

setDone = todoId => {
    this.setState(prevState => ({
      todoList: prevState.todoList.map(el => (el.id === todoId ? {...el, isDone: true} : el))
    }));
}

最后在点击时调用函数并传递 id。也许是这样的：

<button onClick={() => setDone(todo.id)}>set done</button>

推荐阅读