React中带value的文本输入框为何只读？defaultValue与value有何区别？

先看你编写的组件代码：

function CreateTextInput({ id, placeholder, defaultValue, value }) {    
        return (
            <input
                type="text"
                name={id}
                placeholder={placeholder}
                defaultValue={defaultValue}
                value={value}
            //onChange={onChange}
            />
        );
    }

调用代码：

<CreateTextInput id="fieldID1" defaultValue="fieldDefaultValue" value="fieldValue" />

1. 同时设置value和defaultValue导致输入框只读是正常行为 #

当你给input设置value属性但未配套onChange处理函数时，输入框会变成受控组件——其值完全由你传入的value决定。由于没有编写更新value的逻辑，输入框的值会固定在你传入的fieldValue上，自然无法编辑。另外，value的优先级高于defaultValue，同时传递时defaultValue会被直接忽略，相当于只设置了value。

2. defaultValue和value的核心区别 #

• defaultValue：属于非受控组件用法，仅在组件首次渲染时设置输入框的初始值，之后输入框的值由浏览器DOM自行管理，用户输入会直接修改DOM的值，无需React状态同步。适合不需要实时监控或控制输入内容的场景。
• value：属于受控组件用法，输入框的值完全由React状态控制，必须配合onChange事件更新状态，进而同步更新value的值，用户输入才能生效。适合需要实时验证输入、格式化内容，或需要把输入值同步到其他组件的场景。

修正方案 #

方案一：改用受控组件

补充onChange属性，将输入值同步到父组件状态中：

function CreateTextInput({ id, placeholder, value, onChange }) {    
  return (
    <input
      type="text"
      name={id}
      placeholder={placeholder}
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

// 父组件调用示例
// import { useState } from 'react';
// const [inputValue, setInputValue] = useState("fieldValue");
// <CreateTextInput id="fieldID1" value={inputValue} onChange={setInputValue} />

方案二：改用非受控组件

仅保留defaultValue，移除value：

function CreateTextInput({ id, placeholder, defaultValue }) {    
  return (
    <input
      type="text"
      name={id}
      placeholder={placeholder}
      defaultValue={defaultValue}
    />
  );
}

// 调用方式
// <CreateTextInput id="fieldID1" defaultValue="fieldDefaultValue" />

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