深入理解React表单输入：解决value属性导致的只读问题

在React开发过程中，我们经常会遇到给input等表单元素设置了value属性后，输入框突然变成只读状态，无法正常输入内容的情况。这是React受控组件机制下的典型问题，需要从组件状态和事件绑定的维度去理解并解决。

问题产生的核心原因

当我们在React组件中给表单元素绑定value属性，且没有绑定onChange事件时，这个表单元素就会变成受控组件。受控组件的值完全由组件的state控制，输入框的显示内容始终等于我们传入的value值，而用户手动输入的内容不会自动同步到state中，因此就会出现无法编辑的假象。

比如下面这段错误的代码示例，就会出现输入框只读的问题：

import React, { useState } from 'react';

function FormDemo() {
  const [inputValue, setInputValue] = useState('初始值');

  // 没有绑定onChange事件，输入框无法响应输入操作
  return (
    <div>
      <input type="text" value={inputValue} />
    </div>
  );
}

export default FormDemo;

解决方案汇总

方案一：绑定onChange事件同步状态

这是最标准的解决方式，给表单元素绑定onChange事件，在事件回调中更新对应的state，让输入框的值和state保持同步。修改后的代码如下：

import React, { useState } from 'react';

function FormDemo() {
  const [inputValue, setInputValue] = useState('初始值');

  // 定义输入变化的处理函数
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

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

export default FormDemo;

方案二：使用defaultValue替代value

如果不需要实时控制输入框的值，只是需要设置初始值，那么可以使用defaultValue属性，这种属于非受控组件的用法，输入框的值由DOM自身管理，不会受到state的强约束。

import React from 'react';

function FormDemo() {
  return (
    <div>
      {/* 使用defaultValue设置初始值，输入框可正常编辑 */}
      <input type="text" defaultValue="初始值" />
    </div>
  );
}

export default FormDemo;

方案三：特殊情况允许只读时的处理

如果业务场景本身就需要输入框是只读状态，那么可以显式添加readOnly属性，这样语义更清晰，也不会出现不符合预期的编辑行为。

import React, { useState } from 'react';

function FormDemo() {
  const [inputValue] = useState('不可修改的值');

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

export default FormDemo;

受控组件与非受控组件的选择建议

如果需要对表单输入的值做实时校验、格式化处理，或者需要和其他状态联动，优先选择受控组件，通过value+onChange的组合实现状态管理。如果只是简单的表单场景，不需要实时获取输入值，使用非受控组件搭配defaultValue和ref获取最终值即可，能减少不必要的状态更新逻辑。

React表单输入value属性onChange事件受控组件修改时间：2026-06-18 19:03:29