React中onChange仅响应第二次输入的问题求助

问题根源 #

1. DOM操作与React状态管理冲突
   你在组件初始化时执行let toDoIs = document.getElementById("toDoInput");，此时组件尚未完成首次渲染，这个变量拿到的是无效或过时的DOM引用。后续onChange触发时，用这个旧引用取value自然无法捕获最新输入；点击按钮后直接修改toDoIs.value = ""，绕过React状态更新机制，导致状态与实际DOM内容不同步。

2. useState闭包陷阱
   点击Add按钮时，ToDo变量是组件某次渲染时的闭包值，并非最新状态。React状态更新是异步的，第一次输入后状态还未完成更新，点击按钮时拿到的仍是初始值"d"，第二次输入时才会拿到第一次的状态值，这就造成了“延迟一次捕获”的现象。

3. 未遵循受控组件模式
   React推荐用受控组件管理表单输入——输入框的value直接绑定到状态，通过状态更新同步输入内容。你的写法完全脱离这个模式，依赖DOM操作获取值，必然出现状态不同步问题。

修复后的代码 #

import React, { useState } from "react";
import Item from "./Components/Item";
import "./ToDo.css";

function ToDo() {
  const [inputValue, setInputValue] = useState("");
  const [todoList, setTodoList] = useState([]);

  return (
    <div>
      <h1>ToDo</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button
        onClick={() => {
          setTodoList(prevList => [...prevList, { text: inputValue }]);
          setInputValue("");
        }}
      >
        Add
      </button>
      <Item push={todoList} />
    </div>
  );
}

export default ToDo;

关键修改点 #

• 移除DOM操作：改用受控组件模式，输入框value绑定inputValue状态，onChange通过e.target.value获取最新输入值。
• 函数式更新状态：更新待办数组时使用setTodoList(prevList => ...)，确保基于最新的数组状态修改，规避闭包陷阱。
• 状态同步清空输入：通过setInputValue("")更新状态，让React自动同步DOM内容，不再直接操作DOM。

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