React结合redux-form：含单选按钮的表单如何禁用提交按钮至全题作答

嘿，这个需求在redux-form里处理起来其实很清晰，刚好你是全单选按钮的表单，我给你一步步拆解实现方式：

核心思路 #

我们要利用redux-form内置的表单验证机制和状态注入，标记所有单选字段为必填项，然后通过表单的invalid状态来控制提交按钮的禁用——当有任何必填单选未选中时，invalid为true，按钮保持禁用；当所有单选都完成选择后，invalid变为false，按钮自动启用。

具体实现步骤 #

1. 定义验证规则

你可以选择全局验证函数（适合字段较多的情况）或者单个字段的验证规则（灵活度更高）：

方式一：全局验证函数

创建一个验证函数，遍历所有必填的单选字段，检查是否有值：

const validate = values => {
  const errors = {};
  // 替换成你的实际字段名列表
  const requiredQuestions = ['question1', 'question2', 'question3'];
  
  requiredQuestions.forEach(question => {
    if (!values[question]) {
      errors[question] = '请选择一个选项';
    }
  });
  
  return errors;
};

方式二：单个字段的必填验证

直接给每个Field组件绑定redux-form内置的required验证器：

import { Field, reduxForm, required } from 'redux-form';

// 在Field组件中使用
<Field
  name="question1"
  component={RadioGroup}
  // 其他props...
  validate={[required]}
/>

2. 自定义单选组组件

因为redux-form的Field需要一个自定义组件来渲染单选按钮组，我们可以封装一个复用的RadioGroup组件：

const RadioGroup = ({ input, label, options, meta: { touched, error } }) => (
  <div style={{ margin: '15px 0' }}>
    <h4>{label}</h4>
    {options.map(option => (
      <label key={option.value} style={{ marginRight: '15px' }}>
        <input
          type="radio"
          {...input}
          value={option.value}
          checked={input.value === option.value}
        />
        {option.label}
      </label>
    ))}
    {/* 显示验证错误提示（可选） */}
    {touched && error && <span style={{ color: 'red', display: 'block', marginTop: '5px' }}>{error}</span>}
  </div>
);

这个组件接收redux-form注入的input（包含字段的value、onChange等）和meta（包含touched、error等状态），负责渲染单选组并处理选中状态。

3. 构建表单组件并控制按钮状态

在表单组件中，通过redux-form注入的invalid和submitting状态来控制提交按钮的禁用：

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

// 上面的RadioGroup和validate函数放在这里

const SurveyForm = ({ handleSubmit, invalid, submitting }) => {
  // 单选选项列表，可根据需求调整
  const ratingOptions = [
    { value: '1', label: '非常不同意' },
    { value: '2', label: '不同意' },
    { value: '3', label: '中立' },
    { value: '4', label: '同意' },
    { value: '5', label: '非常同意' }
  ];

  const handleFormSubmit = values => {
    // 替换成你的实际提交逻辑（比如发送API请求）
    console.log('提交的表单数据:', values);
  };

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)} style={{ maxWidth: '600px', margin: '20px auto' }}>
      <Field
        name="question1"
        component={RadioGroup}
        label="问题1：你对React的喜爱程度？"
        options={ratingOptions}
      />
      <Field
        name="question2"
        component={RadioGroup}
        label="问题2：你对redux-form的熟悉程度？"
        options={ratingOptions}
      />
      <Field
        name="question3"
        component={RadioGroup}
        label="问题3：你会推荐redux-form给同事吗？"
        options={ratingOptions}
      />

      <button
        type="submit"
        // 当表单无效或正在提交时禁用按钮
        disabled={invalid || submitting}
        style={{ 
          padding: '10px 25px', 
          fontSize: '16px',
          backgroundColor: invalid || submitting ? '#ccc' : '#007bff',
          color: '#fff',
          border: 'none',
          borderRadius: '4px',
          cursor: (invalid || submitting) ? 'not-allowed' : 'pointer'
        }}
      >
        {submitting ? '提交中...' : '提交问卷'}
      </button>
    </form>
  );
};

// 用reduxForm高阶组件包裹表单，绑定表单标识和验证规则
export default reduxForm({
  form: 'surveyForm', // 表单唯一标识，不能重复
  validate // 如果用全局验证函数就加这个，单个字段验证的话可以去掉
})(SurveyForm);

关键细节说明 #

• invalid：redux-form自动维护的状态，当表单存在验证错误（比如必填字段未填）时为true，否则为false。
• submitting：redux-form自动维护的状态，当表单正在提交时为true，用来防止重复提交。
• 单选按钮的value必须唯一：每个单选选项的value不能重复，否则redux-form无法正确记录选中的值，会导致invalid一直为true。

这样实现后，提交按钮会在所有单选问题都得到回答前保持禁用，一旦所有选项都选中，按钮就会自动启用，同时还能防止重复提交～

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