Remix中实现跨组件表单验证与按钮控制

import { useState, useCallback } from 'react';
import { Outlet } from '@remix-run/react';
import OnboardNavBar from './OnboardNavBar';
import OnboardFooter from './OnboardFooter';

export default function OnboardLayout() {
  const [currentPage, setCurrentPage] = useState(1);
  // 存储表单的有效性状态
  const [isFormValid, setIsFormValid] = useState(false);
  // 存储是否需要触发表单提交的信号
  const [triggerFormSubmit, setTriggerFormSubmit] = useState(false);

  // 当表单的有效性改变时，由子组件调用
  const handleFormValidationChange = useCallback((isValid) => {
    setIsFormValid(isValid);
  }, []);

  // 当页脚的提交按钮被点击时，由OnboardFooter调用
  const handleFooterSubmitClick = useCallback(() => {
    if (isFormValid) {
      setTriggerFormSubmit(true); // 告诉表单组件可以提交了
    }
  }, [isFormValid]);

  // 表单提交完成后，由子组件调用，重置提交信号
  const handleFormSubmitted = useCallback(() => {
    setTriggerFormSubmit(false);
  }, []);

  return (
    <div>
      <OnboardNavBar page={currentPage} />
      <div className="flex justify-center">
        {/*
          将表单有效性回调和提交信号传递给Outlet。
          在Remix中，Outlet的children可以通过context或props获取到这些值。
          这里我们通过context来传递，更灵活。
        */}
        <Outlet
          context={{
            onValidationChange: handleFormValidationChange,
            shouldSubmit: triggerFormSubmit,
            onSubmitted: handleFormSubmitted,
          }}
        />
      </div>
      <OnboardFooter
        page={currentPage}
        onPageClick={setCurrentPage}
        isSubmitButtonEnabled={isFormValid} // 控制按钮是否启用
        onFooterSubmit={handleFooterSubmitClick} // 传递提交回调
      />
    </div>
  );
}

import React from 'react';

export default function OnboardFooter({
  page,
  onPageClick,
  isSubmitButtonEnabled,
  onFooterSubmit,
}) {
  // 假设有一些导航逻辑，这里只关注提交按钮
  return (
    <div className="onboard-footer">
      {/* 其他页脚内容，如上一页/下一页按钮 */}
      <button
        onClick={onFooterSubmit}
        disabled={!isSubmitButtonEnabled} // 根据isSubmitButtonEnabled控制按钮状态
        className="submit-button"
      >
        提交
      </button>
    </div>
  );
}

import React, { useEffect, useState } from 'react';
import { useOutletContext } from '@remix-run/react';
import { z } from 'zod'; // 假设使用Zod进行验证

// 定义Zod schema
const myFormSchema = z.object({
  name: z.string().min(1, "姓名不能为空"),
  email: z.string().email("请输入有效的邮箱地址"),
});

export default function MyForm() {
  // 从Outlet context中获取父组件传递的props
  const { onValidationChange, shouldSubmit, onSubmitted } = useOutletContext();

  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  // 表单字段变更处理
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  // 实时验证表单
  useEffect(() => {
    try {
      myFormSchema.parse(formData);
      setErrors({});
      onValidationChange(true); // 通知父组件表单有效
    } catch (error) {
      if (error instanceof z.ZodError) {
        const newErrors = {};
        error.errors.forEach((err) => {
          newErrors[err.path[0]] = err.message;
        });
        setErrors(newErrors);
      }
      onValidationChange(false); // 通知父组件表单无效
    }
  }, [formData, onValidationChange]);

  // 监听shouldSubmit信号，触发实际提交
  useEffect(() => {
    if (shouldSubmit) {
      // 在这里执行Remix的表单提交逻辑
      // 例如，可以使用fetcher.submit或直接调用action
      console.log("表单被提交了！", formData);
      // 模拟异步提交
      setTimeout(() => {
        alert('表单提交成功！');
        onSubmitted(); // 通知父组件提交已完成
        // 重置表单或导航到下一页
      }, 1000);
    }
  }, [shouldSubmit, formData, onSubmitted]);

  // 注意：这里的form onSubmit事件处理函数可以保留，
  // 但我们主要通过父组件和页脚按钮来控制提交
  const handleSubmit = (e) => {
    e.preventDefault();
    // 如果直接点击表单内部的提交按钮，也可以在这里处理
    // 但在我们的场景中，提交是由OnboardFooter触发的
    console.log("表单内部的提交事件被触发，但主要由外部控制");
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">姓名:</label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        {errors.name && <p className="error">{errors.name}</p>}
      </div>
      <div>
        <label htmlFor="email">邮箱:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <p className="error">{errors.email}</p>}
      </div>
      {/* 可以在这里放置一个内部提交按钮，但其行为会被外部控制覆盖或补充 */}
      {/* <button type="submit" disabled={!isFormValid}>内部提交</button> */}
    </form>
  );
}