我尝试将状态设置为空字符串,但它不起作用,输入的值已重置,但它仍然在输入字段中显示输入的值。我该如何解决这个问题?
import { useState } from 'react';
const App = () => {
const [task,setTask] = useState('');
const [list,setList] = useState([]);
const submitHandler = (event) => {
event.preventDefault();
const newTask = { id: new Date().getTime().toString(), title: task };
setList([...list, newTask]);
setTask('');
}
const clearList = () => {
setList([]);
}
const removeItem = (id) => {
const filteredList = list.filter(item => item.id !== id);
setList(filteredList);
}
return <div>
<h2>To do list!</h2>
<form onSubmit={submitHandler}> Enter Task!
<input type='text'
placeholder='Wut you upto?'
onChange = {(event) => {setTask(event.target.value)}}>
</input>
</form>
<div>
{list.map((obj) => (
<h4 key={obj.id}>{obj.title}<button onClick={() => removeItem(obj.id)}>X</button></h4>))}
<button onClick={clearList}>Clear All</button>
</div>
</div>
}
export default App
最佳答案
您需要将value
属性添加到输入字段:
<input type='text'
placeholder='Wut you upto?'
onChange = {(event) => {setTask(event.target.value)}}>
value={task}
</input>
关于javascript - 在 ReactJS 中提交表单后如何重置我的输入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72760394/