React中input的placeholder与value疑问：设value后为何无法编辑？

原因 #

当给<input>设置value="default"时，React会将其识别为受控组件——输入框的内容完全由你传入的value属性控制。但如果没有绑定onChange事件来更新value对应的数据源（比如组件状态），用户输入时value始终固定为"default"，输入框内容不会变化，表现得像只读状态。

而placeholder只是输入框的提示文字，不会控制输入框的实际值，所以不影响正常编辑。

解决方法 #

1. 受控组件（推荐，适合需要实时处理输入内容的场景） #

用React状态管理输入框的值，初始值设为"default"，同时绑定onChange事件更新状态：

import { useState } from 'react';

function EditableInput() {
  // 初始化状态为默认值
  const [inputValue, setInputValue] = useState('default');

  // 监听输入变化，更新状态
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleInputChange} />
  );
}

2. 非受控组件（适合简单场景，无需实时同步状态） #

使用defaultValue属性设置初始值，输入框的值由DOM自身管理，无需绑定状态和事件：

function EditableInput() {
  return (
    <input type="text" defaultValue="default" />
  );
}

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