React输入框仅显示最后输入字符的原因及解决方法

原因解释 #

你遇到的问题核心在于受控组件的逻辑冲突：

• 你给输入框设置了value={name}，这让它变成了React受控组件——输入框的内容完全由状态name决定，而非浏览器原生的输入行为。
• 输入时，handleChange仅把输入值存到了局部变量newName里，没有调用setName更新name状态。这导致组件不会重新渲染，name始终保持初始的空字符串。
• 为什么会看到最后输入的字符？因为浏览器会先执行原生输入行为，把字符显示在输入框里，但React的受控机制会立即将输入框的值重置为name的当前值（空），这个过程极快，让你误以为输入框只显示最后输入的字符。

修复方案 #

根据你的需求，有两种常见的修复方式：

方案1：实时同步输入内容到状态

如果希望输入时就能实时看到Hello {name}的更新，直接在handleChange里调用setName更新状态即可：

function App() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  function handleClick() {
    // 这里可以添加提交逻辑，比如发送请求或打印内容
    console.log("提交的名字：", name);
  }

  return (
    <div className="container">
      <h1>Hello {name}</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
        value={name}
      />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

方案2：点击按钮后再同步状态（输入框不受控）

如果只想在点击按钮后更新Hello {name}的显示，同时让输入框正常输入，需要去掉value={name}，让输入框成为不受控组件，推荐用useRef获取输入值：

import { useState, useRef } from 'react';

function App() {
  const [name, setName] = useState("");
  const inputRef = useRef(null);

  function handleClick() {
    setName(inputRef.current.value);
  }

  return (
    <div className="container">
      <h1>Hello {name}</h1>
      <input
        type="text"
        placeholder="What's your name?"
        ref={inputRef}
      />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

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