输入字段未擦除React

Question

我正在学习React，我创建了一个简单的待办事项列表应用程序，我试图擦除输入字段，因为我为我的onClick功能在我的按键功能。但是，当我在该按键功能上使用setTodoInput("");时，它不会呈现相同的效果。它只显示输入的第一个字符。如果我把setTodoInput("");从按键功能中注释出来，它工作得很好，但输入字段不会删除。我不明白为什么虽然我有一个控制输入，但它的功能却不一样。如果有人能解释一下，我将不胜感激。

这是我的App文件的代码:

import React, { useState } from "react";
import InputArea from "./InputArea";
import ToDoTask from "./ToDoTask";
function App() {
const [todoTasks, setTodoTasks] = useState([]);
function addTask(todoInput) {
setTodoTasks((prevTodoTasks) => {
return [...prevTodoTasks, todoInput];
});
}
function handleKeyPress(event) {
if (event.key === "Enter") {
setTodoTasks((prevTodoInput) => {
const newTodoInput = event.target.value;
return [...prevTodoInput, newTodoInput];
});
// const newTodoInput = event.target.value;
//   setTodoTasks((prevTodoTasks) => {
//     console.log(newTodoInput);
//     return [...prevTodoTasks, newTodoInput];
//   });
// }
}
}
function deleteTodoTask(id) {
setTodoTasks((prevTodoTasks) => {
return prevTodoTasks.filter((task, i) => {
return i !== id;
});
});
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<InputArea onAdd={addTask} onKeyPress={handleKeyPress} />
</div>
<div>
<ul>
{todoTasks.map((todoTasks, i) => (
<ToDoTask
key={i}
id={i}
text={todoTasks}
onChecked={deleteTodoTask}
/>
))}
</ul>
</div>
</div>
);
}
export default App;

我还创建了一个输入组件:

import React, { useState } from "react";
function InputArea(props) {
const [todoInput, setTodoInput] = useState("");
function handleChange(event) {
const newInput = event.target.value;
setTodoInput(newInput);
}
return (
<div className="form">
<input
onKeyDown={(event) => {
props.onKeyPress(event);
setTodoInput("");
}}
onChange={handleChange}
type="text"
value={todoInput}
/>
<button
onClick={() => {
props.onAdd(todoInput);
setTodoInput("");
}}
>
<span>Add</span>
</button>
</div>
);
}
export default InputArea;

这是我的todoTask组件:

import React from "react";
function ToDoTask(props) {
return (
<div
onClick={() => {
props.onChecked(props.id);
}}
>
<li>{props.text}</li>
</div>
);
}
export default ToDoTask;

Answer 1

如果目标是在输入"，那么我建议使用表单元素。只要有一个输入，然后按enter键，同时聚焦将提交表单。使用表单的提交处理程序调用onAdd回调和重置本地todoInput状态。

InputArea

function InputArea({ onAdd }) {
const [todoInput, setTodoInput] = useState("");
const submitHandler = (e) => {
e.preventDefault();
if (todoInput) {
onAdd(todoInput);
setTodoInput("");
}
};
function handleChange(event) {
const { value } = event.target;
setTodoInput(value);
}
return (
<form onSubmit={submitHandler}>
<input onChange={handleChange} type="text" value={todoInput} />
<button type="submit">
<span>Add</span>
</button>
</form>
);
}

演示

function InputArea({ onAdd }) {
const [todoInput, setTodoInput] = React.useState("");
const submitHandler = (e) => {
e.preventDefault();
if (todoInput) {
onAdd(todoInput);
setTodoInput("");
}
};
function handleChange(event) {
const { value } = event.target;
setTodoInput(value);
}
return (
<form onSubmit={submitHandler}>
<input onChange={handleChange} type="text" value={todoInput} />
<button type="submit">
<span>Add</span>
</button>
</form>
);
}
function ToDoTask(props) {
return (
<div
onClick={() => {
props.onChecked(props.id);
}}
>
<li>{props.text}</li>
</div>
);
}
function App() {
const [todoTasks, setTodoTasks] = React.useState([]);
function addTask(todoInput) {
setTodoTasks((prevTodoTasks) => {
return [...prevTodoTasks, todoInput];
});
}
function deleteTodoTask(id) {
setTodoTasks((prevTodoTasks) => {
return prevTodoTasks.filter((task, i) => {
return i !== id;
});
});
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<InputArea onAdd={addTask} />
</div>
<div>
<ul>
{todoTasks.map((todoTasks, i) => (
<ToDoTask
key={i}
id={i}
text={todoTasks}
onChecked={deleteTodoTask}
/>
))}
</ul>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />