Question

我正在使用React作为我的第一个项目来构建待办事项列表Web应用程序。

我想实现仅能正常工作的本地存储，无法完全处理复选框的选中和取消选中。

这里是到已部署网站的链接，因此您可以了解我遇到的问题。

https://rapture-todo.netlify.app/

添加待办事项并将其标记为完成。

重新加载时，待办事项的复选框未选中，但待办事项标记为完成。

这是我的源代码[github链接-https://github.com/coolpythoncodes/React-ToDo-List]。

对于App.js

import React, { Component } from 'react';

import Header from './component/Header';
import Info from './component/Info';
import AddToDo from './component/AddToDo';
import TodoListItem from './component/TodoListItem';

import './sass/main.scss';


class App extends Component{
  constructor(props){
    super(props);

    this.state= {
      value: '',
      list: [],
      show: true,
    };

    this.handleChange= this.handleChange.bind(this);
    this.handleSubmit= this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.deleteTask = this.deleteTask.bind(this);
  }

  componentDidMount() {
    const list = window.localStorage.getItem('userTodo') ? JSON.parse(localStorage.getItem('userTodo')) : [];
    this.setState({ list })
}

  handleChange(e) {
    this.setState({value:e.target.value})
  }

// Handle submission of user todo item
  handleSubmit(e) {
    e.preventDefault();
    const newTask = {
      id: Date.now(),
      userTodo: this.state.value,
      isCompleted: false,
      checked: false,
    }
    
    // Validate form so user doesn't add an empty to do
    if (this.state.value.length > 0) {
      this.setState({
        list: [newTask, ...this.state.list],
        value: '', // Clear input field
        show: true, // Success message
      }, ()=>{
        window.localStorage.setItem('userTodo', JSON.stringify(this.state.list));
      })
    }

  }
  
  // Handles checkbox
  handleInputChange(id) {
    this.setState({list: this.state.list.map(item => {
      if (item.id === id) {
        item.isCompleted = !item.isCompleted; 
        item.checked = !this.state.checked;
    }return item
    })}, ()=>{
      window.localStorage.setItem('userTodo', JSON.stringify(this.state.list));
    })

  }

  // Delete a task
  deleteTask(id){
    this.setState({list: this.state.list.filter(item => item.id !== id )},()=>{
      window.localStorage.setItem('userTodo', JSON.stringify(this.state.list))
    })
    console.log(this.state.list)
  }

  

  render(){
    return(

        <div>
          <Header />
          <Info />
          <AddToDo onChange={this.handleChange} value={this.state.value} onSubmit={this.handleSubmit} />
          <TodoListItem deleteTask={this.deleteTask} onChange={this.handleInputChange} list={this.state.list} defaultChecked={this.state.checked} />
        </div>

    )
  }
}

export default App;

对于TodoListItem.js

import React, { Component } from 'react';
import ToDoItem from './ToDoItem';

import '../sass/main.scss';

class ToDoListItem extends Component{

  render(){
    const {list, onChange, deleteTask, defaultChecked} = this.props;
    return(
        <div>
            {list.map((todo)=>{
                return (
                    <ToDoItem 
                        key={todo.id}
                        userTodo={todo.userTodo} 
                        isCompleted={todo.isCompleted}
                        onChange={onChange}
                        id={todo.id}
                        deleteTask={deleteTask}
                        defaultChecked={defaultChecked}
                    />
                )
            })}

        </div>
    )
  }
}


export default ToDoListItem;

对于TodoItem.js

import React, { Component } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'


import '../sass/main.scss';

class ToDoItem extends Component{

  render(){
    const {userTodo, isCompleted, onChange, id, deleteTask, defaultChecked} = this.props;
    const checkStyle =  isCompleted ? 'completed-todo' : 'not-completed-todo';
    return(
        
      <div className={`container  ${checkStyle}`}>
            <input type="checkbox" onChange={onChange.bind(this, id)} defaultChecked={defaultChecked}/>
            <div >
                <p className='title'>{userTodo}</p>
            </div>

            {/* Delete button */}
            <button onClick={deleteTask.bind(this, id)}><FontAwesomeIcon className='remove-icon' icon={faTrashAlt} /></button>
            

      </div>
    )
  }
}


export default ToDoItem;

请注意：我遇到了其他问题，类似于我遇到的问题，但我无法解决此问题。

如果我没有很好地陈述问题，请告诉我。

Answer 1

在以下App.js中的代码中，

<TodoListItem deleteTask={this.deleteTask} onChange={this.handleInputChange} list={this.state.list} defaultChecked={this.state.checked} />

您正在设置defaultChecked={this.state.checked}，为什么要这么做？该状态下没有checked。

实际上，不需要通过defaultValue。

进行以下更改，

在App.js中，删除defaultValue的{{1}}道具

TodoListItem

在<TodoListItem deleteTask={this.deleteTask} onChange={this.handleInputChange} list={this.state.list}/>中，删除TodoListItem.js

defaultChecked={defaultChecked}

在<ToDoItem key={todo.id} userTodo={todo.userTodo} isCompleted={todo.isCompleted} onChange={onChange} id={todo.id} deleteTask={deleteTask} defaultChecked={defaultChecked} // Remove this. />中，

ToDoItem.js

反应复选框本地存储

1 个答案: