React表单无法维持状态问题咨询（附CodePen示例代码）

我帮你排查了这个表单状态不保留的问题，核心原因是父组件维护的meta状态和子组件Meta的表单没有建立正确的关联，导致输入时状态无法同步和保留。咱们一步步来修复：

1. 修正父子组件的状态传递 #

首先在父组件Parent的render方法里，把当前的meta状态作为props传给Meta组件，让子组件知道当前的状态值：

render() {
  console.log('parent-meta '+this.state.meta);
  return (
    <div>
      {/* 新增currentMeta属性传递当前状态 */}
      <Meta onSubmit={this.changeName} currentMeta={this.state.meta} />
      <h1>Parent</h1>
    </div>
  );
}

2. 将Meta组件改造为受控组件 #

让Meta组件的表单值完全由父组件传入的状态驱动，同时在输入时实时通知父组件更新状态：

class Meta extends React.Component {
  // 处理输入变化，实时同步到父组件
  handleInputChange = (e) => {
    this.props.onSubmit(e.target.value);
  }

  render() {
    return (
      <div>
        <input 
          type="text"
          {/* 用父组件传入的currentMeta作为表单值 */}
          value={this.props.currentMeta}
          {/* 输入变化时触发回调更新父组件状态 */}
          onChange={this.handleInputChange}
        />
      </div>
    );
  }
}

问题根源解释 #

原来的代码中，父组件的meta状态和子组件的表单是完全脱节的：

• 子组件不知道父组件的当前状态，表单初始值和后续更新都没有和meta关联
• 输入时没有及时触发父组件的状态更新，导致父组件的meta无法同步输入内容，看起来像是表单“不保留状态”

改成受控组件后，表单的值完全由父组件的状态驱动，输入操作会实时同步更新父组件的meta状态，这样就能正常保留并展示输入的内容了。

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