React.js开发Web应用：输入框设默认值后无法编辑的问题

你当前的代码把输入框做成了受控组件，通过value绑定了状态inputValue，但缺少onChange事件处理函数——输入内容时状态不会更新，所以输入框内容始终停留在初始值，无法编辑。

解决方法有两种：

方法一：完善受控组件逻辑 #

给输入框添加onChange事件，在输入时同步更新状态：

import { useState } from 'react';

function App() {
  let [inputValue, setInputValue] = useState<string>('Value of Input');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  return (
    <div className="App">
      <input value={inputValue} onChange={handleInputChange} />
    </div>
  );
}

export default App;

如果觉得单独写函数麻烦，也可以直接内联处理：

<input 
  value={inputValue} 
  onChange={(e) => setInputValue(e.target.value)} 
/>

方法二：使用非受控组件 #

如果不需要通过状态实时控制输入框内容，直接用defaultValue设置默认值即可，无需绑定状态：

<input defaultValue="Value of Input" />

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