如何提交后禁用整个redux-form并在清空字段后重新启用

其实redux-form本身就支持通过disabled属性来控制整个表单的禁用状态，比原生的<fieldset disabled>更省心——它会自动把这个状态传递给所有表单字段。下面我给你详细拆解实现步骤：

一、提交表单后禁用整个表单 #

核心思路是用一个状态变量跟踪表单的禁用状态，提交成功后切换这个状态，再传递给redux-form的表单组件即可：

1. 维护禁用状态：不管是函数组件用useState还是类组件用this.state，先声明一个比如isFormDisabled的变量，初始值设为false。
2. 处理提交逻辑：在handleSubmit绑定的提交函数里，完成业务请求（比如API提交）后，把isFormDisabled设为true。
3. 传递禁用状态：把这个状态变量传给redux-form包装后的<form>组件的disabled属性，所有Field组件会自动被禁用。

举个函数组件的示例：

import React, { useState } from 'react';
import { reduxForm, Field } from 'redux-form';

const UserForm = ({ handleSubmit, reset }) => {
  const [isFormDisabled, setIsFormDisabled] = useState(false);

  const onSubmit = async (formValues) => {
    // 模拟后端提交逻辑
    try {
      await fetch('/api/submit-user', {
        method: 'POST',
        body: JSON.stringify(formValues),
        headers: { 'Content-Type': 'application/json' }
      });
      // 提交成功后禁用表单
      setIsFormDisabled(true);
    } catch (err) {
      console.error('提交失败:', err);
      // 提交失败时可选择不禁用，或提示用户错误
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} disabled={isFormDisabled}>
      <Field name="username" component="input" type="text" placeholder="用户名" />
      <Field name="email" component="input" type="email" placeholder="邮箱" />
      
      <button type="submit" disabled={isFormDisabled}>提交</button>
    </form>
  );
};

export default reduxForm({ form: 'userForm' })(UserForm);

二、清空表单后重新启用 #

要清空表单并恢复可用状态，只需要结合redux-form的reset方法和状态切换即可：

1. 获取reset方法：函数组件可直接从redux-form的props中拿到reset；类组件需要通过connect把reset action映射到props。
2. 处理重置逻辑：在重置按钮的点击事件里，先调用reset()清空所有字段，再把isFormDisabled设回false。

给上面的示例补充重置功能：

// 在UserForm组件内添加重置函数
const handleReset = () => {
  reset(); // 清空表单所有字段
  setIsFormDisabled(false); // 重新启用表单
};

// 在render中添加重置按钮
<button type="button" onClick={handleReset} disabled={isFormDisabled}>重置表单</button>

额外提示 #

• 如果你的应用依赖全局redux状态管理，也可以把isFormDisabled放到redux store中，通过connect获取和更新，这样其他组件也能控制该表单的禁用状态。
• redux-form的disabled属性会自动作用于所有Field组件，无需手动给每个输入框添加disabled属性，比原生<fieldset>更贴合redux-form的生态。

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