React中修改父传子元素Props的正确方式？安全表单优化方案

我希望实现一个可复用的「安全表单」组件：当表单提交时，禁用所有<input>元素（添加disabled属性），直到提交处理函数执行完毕，以此避免用户重复提交表单或在提交过程中修改表单内容。

当前实现方案如下：

SafeForm.jsx #

import { cloneElement, useState } from "react";

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function disableInputComponents(elements) {
  console.log('elements are', elements);

  return elements.map(element => {
    if (element.type === undefined) return element;

    const props = { ...element.props };
    const children = element.props.children;

    if (element.type === 'input') props.disabled = true;

    return cloneElement(
      element,
      props,
      Array.isArray(children) ? [...disableInputComponents(children)] : children,
    );
  });
}

export default function SafeForm({ onSubmit, children }) {
  const [requestInProgress, setRequestInProgress] = useState(false);

  return (
    <form onSubmit={async event => {
      event.preventDefault();

      setRequestInProgress(true);
      // 模拟网络延迟，观察输入框是否被禁用
      await sleep(2000);
      await onSubmit(event);
      setRequestInProgress(false);
    }}>
      {requestInProgress ? disableInputComponents(children) : children}
    </form>
  );
}

Login.jsx #

import { useState } from "react";
import SafeForm from "./SafeForm";

export default function Login({ onSuccess }) {
  const [token, setToken] = useState('');

  return (
    <SafeForm
      onSubmit={async () => {
        const response = await fetch(
          `http://localhost:3000/session`,
          { headers: { "Authorization": `Bearer ${token}` } }
        );

        if (response.ok) {
          onSuccess({ ...(await response.json()), token });
        }
      }}
    >
      <h3>Login</h3>
      <div className="mb-3">
        <label className="form-label" htmlFor="token">Token</label>
        <input className="form-control" id="token" value={token}
          required
          onChange={({ target: { value } }) => { setToken(value); }}
        />
      </div>
      <input className="btn btn-primary" type='submit' value='Login' />
    </SafeForm>
  );
}

该方案虽能运行，但出现了「Each child in a list should have a unique "key" prop.」的警告，且实现方式较为繁琐，我认为存在更符合React范式的优雅解决方案，请问正确的实现方式是什么？

你当前的问题根源在于递归克隆元素的方式既冗余又容易触发key警告，以下是两种符合React范式的优化方案：

方案一：利用<fieldset>批量禁用（最简方案） #

HTML原生<fieldset>元素自带批量禁用特性：当它被设置为disabled时，内部所有表单控件会自动禁用，无需逐个处理。基于此实现安全表单：

修改后的SafeForm.jsx #

import { useState } from "react";

export default function SafeForm({ onSubmit, children }) {
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <form onSubmit={async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      try {
        await onSubmit(event);
      } finally {
        // 无论请求成功/失败，都恢复表单状态
        setIsSubmitting(false);
      }
    }}>
      <fieldset disabled={isSubmitting}>
        {children}
      </fieldset>
    </form>
  );
}

Login.jsx无需修改 #

直接沿用原有代码即可，<fieldset>会自动处理内部所有输入框、提交按钮的禁用状态，完全消除key警告。

方案二：Context+自定义组件（灵活可控方案） #

如果需要精细化控制（比如部分控件无需禁用），可以用React Context传递提交状态，封装自定义输入组件：

1. 创建SafeFormContext #

// SafeFormContext.js
import { createContext, useContext } from "react";

const SafeFormContext = createContext({
  isSubmitting: false
});

export const useSafeForm = () => useContext(SafeFormContext);
export default SafeFormContext;

2. 修改SafeForm组件 #

import { useState, useMemo } from "react";
import SafeFormContext from "./SafeFormContext";

export default function SafeForm({ onSubmit, children }) {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const contextValue = useMemo(() => ({
    isSubmitting
  }), [isSubmitting]);

  return (
    <SafeFormContext.Provider value={contextValue}>
      <form onSubmit={async (event) => {
        event.preventDefault();
        setIsSubmitting(true);
        try {
          await onSubmit(event);
        } finally {
          setIsSubmitting(false);
        }
      }}>
        {children}
      </form>
    </SafeFormContext.Provider>
  );
}

3. 封装SafeInput组件 #

// SafeInput.jsx
import { useSafeForm } from "./SafeFormContext";

export default function SafeInput(props) {
  const { isSubmitting } = useSafeForm();
  // 允许外部传入disabled覆盖上下文状态
  return <input {...props} disabled={props.disabled ?? isSubmitting} />;
}

4. 在Login中使用 #

import { useState } from "react";
import SafeForm from "./SafeForm";
import SafeInput from "./SafeInput";

export default function Login({ onSuccess }) {
  const [token, setToken] = useState('');

  return (
    <SafeForm
      onSubmit={async () => {
        const response = await fetch(
          `http://localhost:3000/session`,
          { headers: { "Authorization": `Bearer ${token}` } }
        );

        if (response.ok) {
          onSuccess({ ...(await response.json()), token });
        }
      }}
    >
      <h3>Login</h3>
      <div className="mb-3">
        <label className="form-label" htmlFor="token">Token</label>
        <SafeInput className="form-control" id="token" value={token}
          required
          onChange={({ target: { value } }) => { setToken(value); }}
        />
      </div>
      <SafeInput className="btn btn-primary" type='submit' value='Login' />
    </SafeForm>
  );
}

方案对比 #

• 方案一：依赖原生HTML特性，代码极简，无额外组件开销，适合绝大多数场景，彻底解决原方案的key警告问题。
• 方案二：支持精细化控制，适合复杂表单场景，但需要额外封装组件，代码量稍大。

额外优化建议 #

1. 移除原方案中的sleep函数，实际场景中直接使用真实异步请求即可。
2. 加入try/finally块确保表单在请求失败时也能恢复可交互状态，避免出现表单永久禁用的情况。

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