React表单输入框无法修改内容问题求助：设置初始值后无法编辑输入

嘿，这个问题我太熟了！你这是没搞懂React受控组件的核心逻辑呀——输入框被你用固定值锁死了，自然没法修改或者输入新内容～

问题根源 #

React里的输入框如果设置了value属性，就会变成受控组件：它的值完全由你提供的状态（state）来控制。你现在把value硬写成固定字符串"Hello"，又没在onChange事件里更新这个值，输入框根本不会响应你的输入操作，相当于被焊死在"Hello"这个值上了。

修复步骤 #

只需要3步就能搞定：

1. 新增一个专门存储输入框值的state，初始值设为你想要的"Hello"
2. 把输入框的value绑定到这个state变量
3. 在onChange事件里更新这个state，让输入框的值跟着用户输入同步变化

修改后的完整代码 #

import { React, useState } from "react";
const App = () => {
  const [num, setNum] = useState(0);
  // 新增输入框专属状态，初始值为"Hello"
  const [inputValue, setInputValue] = useState("Hello");
  
  const handleClick = () => {
    setNum(num + 1);
  };
  
  const mew = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
    console.log("submitted");
    // 提交时可以轻松拿到输入框的最新值
    console.log("输入的名字：", inputValue);
  };
  
  return (
    <div className="bg-green-500 text-center">
      <h1 className="bg-red-200">
        🎰 Welcome to <span> Slot Machine game</span> 🎰{" "}
      </h1>
      <h1></h1>
      <button
        onClick={handleClick}
        className="bg-red-200 w-92 mt-4 mb-4 rounded-full p-2 text-center"
      >
        Click
      </button>
      <h1>{num}</h1>
      <form className="form" onSubmit={mew}>
        <div className="form-control">
          <label htmlFor="firstName">Name : </label>
          <input
            className="mb-2"
            type="text"
            name="txt"
            id="firstName" // 和label的htmlFor对应上，提升可访问性
            // 将value绑定到状态变量
            value={inputValue}
            // onChange时更新状态，同步用户输入
            onChange={(e) => setInputValue(e.target.value)}
          />
        </div>
        {/* 加个提交按钮，才能触发表单的onSubmit事件 */}
        <button type="submit" className="bg-blue-500 text-white p-2 rounded">提交</button>
      </form>
    </div>
  );
};
export default App;

额外小提示 #

如果你只是想设置初始值，不需要实时同步输入内容到state，也可以用defaultValue="Hello"代替value，这样输入框就变成非受控组件，也能正常输入。但如果需要做表单验证、实时预览输入内容这类操作，受控组件的方式会更灵活可控～

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