时间戳

首页 > 解决方案 > 我正在制作的这个 React 待办事项应用程序中缺少什么？

javascript - 我正在制作的这个 React 待办事项应用程序中缺少什么？

问题描述

是的，我是 React 的新手，我正在尝试从头开始制作（臭名昭著的？）待办事项应用程序。到目前为止，我只有一个 todo 组件，然后是主应用程序。这是我的代码 - 首先是 Todo 组件：

import PropTypes from 'prop-types';

class Todo extends Component {

    static defaultProps = {
        completed: false,
    }

    static propTypes = {
        completed: PropTypes.bool.isRequired,
        // name: PropTypes.string.isRequired,
    }

    constructor(props){
        super(props)

        this.state = {
            completed: false,
        }
    }

    render(){
        return (
            <div>
                {!this.state.completed && <div>
                    <span>{this.props.name}</span>
                    <input type="checkbox" onClick={() => {this.markCompleted()}}/>
                </div>}
            </div>
        )
    }

    markCompleted = () => {
        this.setState((currentState) => {
            return {
                completed: !currentState.completed
            }
        })
    }
}

export default Todo;

然后是主要的 App 组件...

import React from 'react';
import Todo from './Todo';
import './App.css';

class App extends React.Component {

  constructor(props){
    super(props)
      this.state = {
        todos: [{id: 1, name: 'take out trash'}, {id: 2, name: 'feed the cat'}]
      }
  }

  render(){
    let textInput;
    const todos = this.state.todos.map(todo => <Todo key={todo.id} name={todo.name} completed={todo.completed}/>)
    return (
      <div className="App">
         <input type="text" ref={(el) => {textInput = el}} />
         <button onClick={() => {this.addTodo(textInput.value)}}>Click to Add a Todo</button>
        {todos}
      </div>
    );
  }

  addTodo = (todoName) => {
    const newTodo = {id: this.state.todos.length + 1, name: todoName};
    const todos = this.state.todos.map(todo => <Todo key={todo.id} name={todo.name} completed={todo.completed}/>)
    todos.push(newTodo)
    console.log(this.state.todos);
      this.setState({
        todos
      })
      // console.log(todos)
    }
}

export default App;

所以我有一个难题。在初始渲染时，todos 数组的状态映射得很好。但是，当我输入一个 todo 并单击按钮添加 todo 时，其他 todo 的所有名称都消失了，只有最后推送的 todo 的名称出现。因此，如果我要添加一个待办事项“支付账单”，那么“取出垃圾”和“喂猫”的复选框仍然可见，但这些待办事项的名称将不再可见。我也可以单击复选框来删除待办事项，但我希望我的待办事项数组能够配合。我想我也应该用来.filter正确过滤掉完成状态标记为的待办事项true。由于todoName我在addTodo方法？这会导致所有以前的待办事项名称都未定义吗？我真的在努力学习，我愿意接受所有帮助和改进建议。我会要求我们使用我已经拥有的代码，因为我之前已经看到其他人是如何制作待办事项应用程序的，我不想只是复制和观察别人的代码，因为我觉得那会减损从我的学习中。提前感谢您的帮助！

标签： javascriptreactjs

解决方案

我在App课堂上做了一些更正：

在addTodo中，简化它，您可以像这样推送状态数组：

  addTodo = (todoName) => {
    const newTodo = {id: this.state.todos.length + 1, name: todoName};
      this.setState({
        todos: [...this.state.todos, newTodo]
      })
      console.log(this.state.todos);
    }

渲染也是一样，你不需要你正在使用的辅助待办事项，只需像你一样映射状态。

  render(){
    let textInput;
    return (
      <div className="App">
         <input type="text" ref={(el) => {textInput = el}} />
         <button onClick={() => {this.addTodo(textInput.value)}}>Click to Add a Todo</button>
        {this.state.todos.map(todo => <Todo key={todo.id} name={todo.name} completed={todo.completed}/>)}
      </div>
    );
  }

推荐阅读