为什么我的输入文本是空的在我的待办事项列表应用程序?

Question

我建立一个做列表反应应用程序，当我写的东西在我的输入文本字段，输入文本的值不显示在列表上。它只显示一个，没有任何文字。有人能帮帮我吗?

的形式。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;

基于网络。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;

Todo.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;

Answer 1

我想你错过了一些显示记录的代码

代码应该如下所示

Form.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} 
/>
))}

这里有一个简单的例子

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