在ReactJ中提交表格后，如何重置输入字段？

Question

我尝试将状态设置为一个空字符串，但它不起作用，输入的值已重置，但仍显示输入字段内的输入值。我该如何解决？

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

Answer 1

您需要将value属性添加到输入字段：

          <input type='text'
            placeholder='Wut you upto?'
            onChange = {(event) => {setTask(event.target.value)}}>
            value={task}
          </input>