React + TypeScript 编辑表单：为什么要区分 name 和 editingName

React + TypeScript 编辑表单：为什么要区分 `name` 和 `editingName`

在 React 表单中，很多初学者会只用一个 state 保存输入框内容。但只要交互变成"修改后点击保存"，一个 state 往往不够。

这个 React + TypeScript Demo 把名字拆成 name 与 editingName：前者是已保存的数据，后者是输入框里的草稿。本文用这个最小案例梳理状态、Props、受控输入框与 useEffect 的连接方式。

代码来自一个本地教学 Demo 的静态阅读，运行未验证。

状态先按职责拆分

父组件中有两份 state：

tsx 复制代码

const [name, setName] = React.useState('defaultName')
const [editingName, setEditingName] = React.useState('defaultName')

状态	含义	何时变化
`name`	已保存的正式名字	加载完成或点击保存后
`editingName`	正在输入的草稿	每次输入时

如果只使用 name，用户每打一个字就直接修改正式数据。拆分后，可以实现"编辑、保存、取消"等常见交互。

父组件拥有状态，子组件负责通知

父组件把数据和能力传入输入组件：

tsx 复制代码

<NameEditComponent
  editingName={editingName}
  onNameUpdate={setUserNameState}
  onEditingNameUpdates={setEditingName}
  disabled={editingName === '' || editingName === name}
/>

这四个 Props 不是重复传参，而是明确职责：

editingName：输入框显示什么；
onEditingNameUpdates：用户输入时怎么更新草稿；
onNameUpdate：点击按钮时怎么提交；
disabled：什么时候不允许提交。

子组件不应该自己保存父组件的正式名字。它只把用户动作通过回调通知父组件。

受控输入框的数据流

输入组件的关键代码是：

tsx 复制代码

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  onEditingNameUpdates(e.target.value)
}

<input value={editingName} onChange={onChange} />

它构成受控组件：value 由 React state 决定，输入事件只负责发起更新。

text 复制代码

用户输入
→ onChange 读取 e.target.value
→ 调用父组件的 setEditingName
→ 父组件重新渲染
→ 最新 editingName 传回 input.value

这样页面上所有依赖 editingName 的位置，都有同一个数据来源。

点击 Change 时才更新正式值

父组件的提交函数：

tsx 复制代码

const setUserNameState = () => {
  setName(editingName)
}

按钮点击后，子组件调用 onNameUpdate()，最终执行这段逻辑。

text 复制代码

输入期间：name 不变，editingName 改变
点击 Change：name = editingName

这正是"草稿"和"已保存值"分离的价值。

TypeScript 如何约束组件协作

输入组件通过 interface 描述 Props：

tsx 复制代码

interface Props {
  editingName: string
  onNameUpdate: () => void
  onEditingNameUpdates: (newEditingName: string) => void
  disabled: boolean
}

它会在编码阶段检查：

editingName 是否为字符串；
保存回调是否无需参数；
输入更新回调是否接收字符串；
disabled 是否为布尔值。

例如把 onNameUpdate 写成必须接收事件对象的函数，而子组件实际调用 onNameUpdate()，TypeScript 会帮助发现这个契约不一致的问题。

`useEffect`：模拟异步加载初始化数据

Demo 中用定时器模拟接口返回：

tsx 复制代码

React.useEffect(() => {
  loadUsername()
}, [])

空依赖数组表示首次挂载后执行。加载完成后同时设置两份状态：

tsx 复制代码

setName('loadedName')
setEditingName('loadedName')

真实项目里，这里常替换为请求接口。加载得到的数据既要更新正式值，也要初始化编辑草稿，避免输入框仍停留在旧内容。

`Hello` 应该显示正式值还是草稿？

Demo 当前把 editingName 传给展示组件：

tsx 复制代码

<HelloComponent username={editingName} />

含义是：输入框一变化，Hello 立即预览草稿。

如果 Hello 的语义是"已保存的用户名"，则更适合传入：

tsx 复制代码

<HelloComponent username={name} />

没有绝对正确答案，关键是先定义 UI 的业务含义，再选择对应状态。

自检清单

是否需要区分"草稿值"和"已保存值"？
state 是否放在需要共享它的最近共同父组件？
输入框是否使用 value + onChange？
子组件是否通过回调通知父组件，而不是直接修改外部数据？
Props 的名称、参数和 TypeScript 类型是否一致？
useEffect 中的异步逻辑是否需要清理或避免过期结果？

结语

React 表单的重点不是把值塞进 input，而是设计状态职责：谁拥有数据、谁负责编辑、何时提交。把 name 和 editingName 分开后，保存、取消、校验、请求接口等能力都会有清晰的落点。

React + TypeScript 编辑表单：为什么要区分 name 和 editingName