React多步骤注册：主页面Submit按钮与子表单联动禁用问题

用localStorage关联状态行不通的核心原因是：localStorage的变更不会触发React组件重新渲染，主页面无法实时感知子表单的校验状态变化，自然没法更新按钮的禁用状态。

推荐用状态提升的方案，把校验状态托管到主组件，子表单通过回调同步校验结果，具体实现如下：

1. 主页面改造 #

在主组件中新增状态管理当前步骤的校验结果，并且给子表单传递回调函数：

import { useState } from 'react';
import RegisterS1 from './RegisterS1';

export default function RegisterMain() {
  const [activeStep, setActiveStep] = useState(0);
  // 新增状态：记录当前步骤是否通过校验
  const [currentStepValid, setCurrentStepValid] = useState(false);

  const handleSubmit = () => {
    // 提交逻辑
  };

  return (
    <div>
      {/* 根据activeStep渲染对应子表单，传递校验回调 */}
      {activeStep === 0 && (
        <RegisterS1 onValidationChange={setCurrentStepValid} />
      )}
      {/* 其他步骤组件... */}

      {/* Submit按钮根据currentStepValid设置禁用状态 */}
      <button
        type="button"
        onClick={handleSubmit}
        disabled={!currentStepValid}
      >
        提交
      </button>
    </div>
  );
}

2. 子表单RegisterS1改造 #

在子表单的校验逻辑触发时，调用主组件传递的回调函数，同步校验结果：

import { useState, useEffect } from 'react';

export default function RegisterS1({ onValidationChange }) {
  const [formData, setFormData] = useState({ username: '', email: '' });
  const [isValid, setIsValid] = useState(false);

  // 表单校验逻辑
  useEffect(() => {
    const validate = () => {
      const { username, email } = formData;
      // 示例校验规则：用户名不为空，邮箱格式正确
      const usernameValid = username.trim().length > 0;
      const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
      return usernameValid && emailValid;
    };

    const result = validate();
    setIsValid(result);
    // 调用回调同步给主组件
    onValidationChange(result);
  }, [formData, onValidationChange]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div>
      <input
        name="username"
        value={formData.username}
        onChange={handleInputChange}
        placeholder="用户名"
      />
      <input
        name="email"
        value={formData.email}
        onChange={handleInputChange}
        placeholder="邮箱"
      />
    </div>
  );
}

额外说明 #

如果你的注册步骤很多，状态提升会导致props层层传递麻烦，可以改用React Context来全局管理各步骤的校验状态，核心逻辑还是：子表单校验完成后更新全局状态，主组件监听全局状态控制按钮禁用。

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