React实现待办事项列表后提交待办项输入框无法清空的问题求助

咱们先来揪出问题的核心：你已经用useState管理了输入框的状态toDo，但提交待办项之后，完全没去重置这个状态呀！只要在提交成功后调用setToDo("")，输入框就能跟着清空了。

另外还有几个小细节可以优化，让代码更健壮：

• 你原来用toDoList.includes(newItem.value)判断重复是错的——toDoList里存的是对象，不是字符串，得用some()方法检查是否已有相同内容的待办项
• 直接修改原数组toDoList.push(newItem)不符合React状态更新的最佳实践，应该基于前一个状态创建新数组，用函数式更新更可靠
• 输入框没绑定value={toDo}，这是受控组件的核心，没绑定的话状态和输入框内容会不同步

下面是修改后的完整代码：

import { useState } from 'react'; // 别忘了导入useState，原代码可能漏了

const App = () => { 
  const [toDoList, setToDoList] = useState([]); 
  const [toDo, setToDo] = useState(""); 

  const handleToDo = (event) => { 
    const { value } = event.target; 
    setToDo(value); 
  }; 

  const submit = () => { 
    if (!toDo.trim()) return; // 先过滤空输入（包括全空格），直接返回不处理

    const newItem = { 
      id: 1 + Math.random(), 
      value: toDo.trim(), // 去掉首尾空格，体验更友好
    }; 

    // 检查是否已有相同内容的待办项
    const isDuplicate = toDoList.some(item => item.value === newItem.value);
    if (!isDuplicate) {
      // 用函数式更新，基于前一个状态创建新数组，避免异步更新问题
      setToDoList(prevList => [...prevList, newItem]);
      // 核心：重置输入框状态
      setToDo("");
    }
  }; 

  return ( 
    <div className="container"> 
      Add an Item <br /> 
      <input 
        type="text" 
        placeholder="Type item here..." 
        onChange={handleToDo} 
        value={toDo} {/* 绑定value，让输入框完全受状态控制 */}
      /> 
      <button className="add-btn btn-floating" onClick={submit}> 
        <i className="material-icons">+</i> {/* React里类名要用className，不是class */}
      </button> 
      <br /> 
      <ul> 
        {/* 补充待办项渲染和删除逻辑示例 */}
        {toDoList.map(item => (
          <li key={item.id}>
            {item.value}
            <button onClick={() => setToDoList(prevList => prevList.filter(i => i.id !== item.id))}>
              <i className="material-icons">delete</i>
            </button>
          </li>
        ))}
      </ul> 
    </div> 
  ); 
}; 

export default App;

重点修改说明：

• 给input绑定value={toDo}：这是受控组件的关键，确保输入框内容和toDo状态完全同步，这样调用setToDo("")才能真正清空输入框
• 提交成功后调用setToDo("")：直接重置输入框的状态，这就是解决你问题的核心操作
• 替换class为className：React元素的类名必须用className，否则会出现警告
• 用some()判断重复：针对数组中的对象类型，正确检查是否已有重复内容
• 函数式更新状态：当新状态依赖前一个状态时，这种方式能避免异步更新导致的错误

这样修改后，提交待办项后输入框就会自动清空，同时代码也更规范可靠啦~

内容的提问来源于stack exchange，提问作者Niic