React多步骤标签页表单如何实现兄弟组件数据共享避免状态丢失

方案可行性说明 #

你提出的父组件维护统一大状态的方案完全可行，这是React里处理跨组件状态共享的标准实践「状态提升」，不过你当前的代码写法还有几个需要调整的问题，否则还是会出现状态丢失：

• 你的子组件目前是自己维护内部values状态，并没有和传入的bigState做同步，只要Tab切换时子组件被销毁，内部状态就会被清空。需要把状态的控制权完全交给父组件：子组件不再单独维护内部的useState，直接使用父组件传入的状态作为表单字段值，同时子组件输入变化时调用父组件传入的回调更新父级的大状态。
• 注意React组件名不能以数字开头，1Form、2Form属于非法命名，会被React识别为普通HTML标签导致报错，建议改为FormStep1、FormStep2这类合法标识符。

更优实现方案 #

可以根据项目复杂度选择对应方案：

1. 完善版状态提升（适合2-3个步骤、嵌套不深的简单表单）
   直接补全你当前的思路即可，参考代码示例：
   父组件逻辑：

const initialValues = {
  nome: "",
  cpf: "",
  email: "",
  telefone: "",
  nomeResp: "",
  cpfResp: "",
  // 第二步表单的字段也可以提前定义在这里
};

const FormContainer = () => {
  const [bigState, setBigState] = useState(initialValues);
  const [tabIndex, setTabIndex] = useState(0);

  const handleFieldChange = (fieldName, value) => {
    setBigState(prev => ({...prev, [fieldName]: value}));
  };

  return (
    <SwipeableViews index={tabIndex} onChangeIndex={setTabIndex}>
      <TabPanel value={tabIndex} index={0}>
        <FormStep1 values={bigState} onFieldChange={handleFieldChange} />
      </TabPanel>
      <TabPanel value={tabIndex} index={1}>
        <FormStep2 values={bigState} onFieldChange={handleFieldChange} />
      </TabPanel>
    </SwipeableViews>
  )
}

子组件（以FormStep1为例）：

const FormStep1 = ({values, onFieldChange}) => {
  const handleChange = (e) => {
    onFieldChange(e.target.name, e.target.value);
  };

  return (
    <input name="nome" value={values.nome} onChange={handleChange} />
    // 其他表单字段同理
  )
}

2. Context封装（适合步骤多、表单组件嵌套深的场景）
   把表单状态和更新方法封装在Context里，所有步骤的表单组件直接从Context取值/调用更新，避免多层props传递。
3. 专业表单库（适合有校验、复杂提交逻辑的表单场景）
   直接用React Hook Form、Formik这类成熟的表单库，这类库本身就支持多步骤表单的状态持久化，还自带字段校验、错误提示、提交防抖等能力，不用自己手动封装状态逻辑，开发效率更高。
4. 持久化存储（需要支持页面刷新不丢数据的场景）
   如果需求要求用户刷新页面后已填内容不丢失，可以把表单状态同步存在sessionStorage/localStorage里，组件初始化时先从存储中取状态，更新时同步回存即可。

另外还有一种不用改状态的临时方案：修改TabPanel的渲染逻辑，切换标签时不销毁组件，只是设置display: none隐藏，这样组件内部状态也能保留，但这种方式只适合表单非常简单的场景，标签页多了会有性能损耗，而且如果页面跳转再回来状态还是会丢失，稳定性不如状态提升方案。

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