reactjs - 反应复选框本地存储

问题描述

我正在使用 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;

请注意：我已经解决了与我遇到的问题类似的其他问题，但我无法解决这个问题。

如果我没有很好地说明问题，请告诉我。

标签： reactjs

解决方案

在下面的代码中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道具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,

<input type="checkbox"onChange={onChange.bind(this, id)}
  defaultChecked={isCompleted} // Replace defaultValue with isCompleted
/>

reactjs - 反应复选框本地存储

问题描述

解决方案

推荐阅读