时间戳

首页 > 解决方案 > 为什么我的待办事项列表应用程序中的输入文本为空？

reactjs - 为什么我的待办事项列表应用程序中的输入文本为空？

问题描述

我正在构建一个待办事项列表反应应用程序，当我在输入文本字段中写一些内容时，输入文本的值未显示在列表中。它只显示一个没有任何文字。有人可以帮助我吗？

Form.jsx - 我在哪里获得输入文本的值

import React from 'react';

const Form = ({setInputText, setTodos, todos, inputtText}) => {

    const inputTextHandler = (event) => {
        setInputText(event.target.value)
    }

    const submitTodoHandler = (event) => {
        event.preventDefault();
        setTodos([
            ...todos, {text: inputtText, completed: false, id: Math.random() * 1000},
        ])
        setInputText("");
    };

    return (
        <form>
            <input value={inputtText} type="text" className="todo-input" onChange={inputTextHandler} />
            <button className="todo-button" type="submit" onClick={submitTodoHandler}>
            <i className="fas fa-plus-square"></i>
            </button>
            <div className="select">
                <select name="todos" className="filter-todo">
                    <option value="all">All</option>
                    <option value="completed">Completed</option>
                    <option value="uncompleted">Uncompleted</option>
                </select>
            </div>
        </form>
    )
}

export default Form;

TodoList.jsx - 我显示所有

import React from "react";
import Todo from "./Todo";

const TodoList = ({ todos, setTodos }) => {
  return (
    <div className="todo-container">
      <ul className="todo-list">
        {todos.map((todo) => (
          <Todo
            text={todo.text}
            todos={todos}
            setTodos={setTodos}
            key={todo.id}
            todo={todo} // para ter aceso à cada elemento primeiro
          />
        ))}
      </ul>
    </div>
  );
};
export default TodoList;

待办事项.jsx

import React from 'react';

const Todo = ({text, setTodos, todos, todo}) => {


const deleteHandler = () => {
    setTodos(todos.filter(el => el.id !== todo.id))
};

    return (
        <div className="todo">
            <li className="todo-item">{text}</li>
            <button className="complete-btn"><i className="fas fa-check"></i></button>
            <button onClick={deleteHandler} className="trash-btn"><i className="fas fa-trash"></i></button>
        </div>
    );
};

export default Todo;

标签： reactjs

解决方案

我认为您错过了一些用于呈现记录的代码

代码应如下所示

表单.jsx：

submitTodoHandler() { 
    const userInput = { 
        text: inputtText,
        // Add a random id which is used to delete 
        // Add a user value to list 
        completed : false ,
            id :  Math.random() * 1000
        }; 
      
        // Update list 
        const list = [...this.state.todos]; 
        list.push(userInput); 
      
        // reset state 
        this.setState({ 
            list
        });      
}

TodoList.jsx：

{this.state.todos.map((todo) => (
    <Todo
        text={todo.text}
        status={todo.completed}
        key={todo.id}
        todo={todo} 
    />
))}

你可以在这里看到一个简单的例子

希望上面的例子对你有帮助

推荐阅读