在React表单开发中，输入框的占位符显示和用户输入数据的同步是高频需求，未正确处理的场景下常出现输入后数据未更新、占位符与输入内容冲突等问题，而受控组件就是解决这类问题的标准方案。
什么是React受控组件
受控组件指的是表单输入元素的值由React组件的state完全控制的组件，输入框的显示值、变更逻辑都和组件状态绑定，开发者可以通过修改state直接控制输入框的内容，也能实时获取用户输入的最新数据。
和不受控组件相比，受控组件的所有输入行为都可追踪，数据流向清晰，更适合需要实时校验、同步数据的场景。
受控组件解决数据同步的核心逻辑
受控组件实现数据同步需要两个核心步骤：一是将输入框的value属性绑定到组件的state，二是监听输入框的onChange事件，在事件回调中更新state。
下面是一个基础的受控组件示例，实现输入框内容和state的实时同步：
import React, { useState } from 'react';
function ControlledInput() {
// 定义状态存储输入框的值
const [inputValue, setInputValue] = useState('');
// 处理输入变化的回调
const handleInputChange = (e) => {
// 更新state为输入框的最新值
setInputValue(e.target.value);
};
return (
<div>
<p>当前输入内容：{inputValue}</p>
{/* 绑定value和onChange事件 */}
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="请输入内容"
/>
</div>
);
}
export default ControlledInput;
在上述代码中，输入框的value始终等于inputValue状态，用户输入时会触发onChange回调，更新inputValue，输入框显示的内容也会同步更新，实现了数据和视图的双向同步。
受控组件处理占位符的常见问题
很多开发者在使用受控组件时会遇到占位符相关的问题，最常见的就是给value绑定了空字符串初始值后，占位符不显示的情况。
这是因为当<input>的value属性被设置为空字符串时，React会认为输入框有确定的值，就不会显示placeholder的内容。要解决这个问题，只需要保证初始状态下value为undefined或者null，而不是空字符串。
下面是错误和正确的写法对比：
| 场景 | 代码示例 | 效果 |
|---|---|---|
| 错误写法 | <input value="" placeholder="请输入内容" /> | 占位符不显示，输入框为空但无提示 |
| 正确写法 | <input value={inputValue} placeholder="请输入内容" />，其中inputValue初始为undefined | 输入框无内容时显示占位符，输入后占位符消失 |
完整示例：带占位符和数据同步的输入框
下面是一个完整的受控组件示例，同时处理占位符显示和数据同步，还加入了简单的输入校验逻辑：
import React, { useState } from 'react';
function UserNameInput() {
// 初始值设为undefined，保证占位符正常显示
const [name, setName] = useState(undefined);
const [errorMsg, setErrorMsg] = useState('');
const handleNameChange = (e) => {
const value = e.target.value;
// 更新输入值
setName(value);
// 简单校验：长度不能超过10位
if (value.length > 10) {
setErrorMsg('用户名长度不能超过10位');
} else {
setErrorMsg('');
}
};
return (
<div style={{ padding: '20px' }}>
<h3>用户名输入</h3>
<input
type="text"
value={name}
onChange={handleNameChange}
placeholder="请输入用户名，最多10位"
style={{ width: '300px', padding: '8px' }}
/>
{/* 错误提示 */}
{errorMsg && <p style={{ color: 'red', fontSize: '14px' }}>{errorMsg}</p>}
<p>当前用户名：{name || '未输入'}</p>
</div>
);
}
export default UserNameInput;
受控组件使用的注意事项
- 如果输入框需要支持清空操作，清空时可以将状态设置为undefined，而不是空字符串，避免占位符不显示的问题。
- 对于多行文本输入框<textarea>，受控组件的写法和普通输入框一致，也是绑定value和onChange，不需要像原生HTML那样把内容放在标签内部。
- 如果同时需要处理多个输入框，可以通过给输入框添加name属性，在onChange回调中根据name统一更新对应的状态，减少重复代码。
通过受控组件的方式处理输入框，既能保证用户输入的数据实时同步到组件状态，也能正确处理占位符的显示逻辑，是React表单开发的首选方案，掌握其原理和写法能有效减少表单相关的开发问题。