React结合Material-UI的FormControlLabel单选按钮异常问题

我来帮你理顺这两个头疼的问题——表单提交获取单选值和redux-form中预选中单选按钮的设置，结合你的代码来调整，保证适配redux-form的逻辑：

1. 修正RadioGroup组件，适配redux-form #

你的核心问题是没有充分利用redux-form的Field组件提供的input props，反而自己传递了value和handleChange，这导致了状态不同步的问题。修改你的renderRadioGroup.js，直接用redux-form自动传入的input对象（包含value和onChange）：

import React from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

const renderRadioGroup = ({ input, label, fieldName, options, meta: { touched, error }}) => (
  <FormControl component="fieldset" fullWidth={true}>
    <FormLabel component="legend">{label}</FormLabel>
    {/* 直接使用redux-form input里的value和onChange，自动同步表单状态 */}
    <RadioGroup 
      row 
      aria-label={fieldName} 
      name={fieldName} 
      value={input.value} 
      onChange={input.onChange}
    >
      { options.map((item, j) =>
        <FormControlLabel 
          key={j} 
          value={item.value} 
          disabled={item.disabled} 
          control={<Radio />} 
          label={item.label} 
        />
      ) }
    </RadioGroup>
    {/* 可选：添加错误提示，提升用户体验 */}
    {touched && error && <span style={{color: '#f44336', fontSize: '0.75rem'}}>{error}</span>}
  </FormControl>
)

export default renderRadioGroup;

2. 简化组件使用方式 #

现在使用Field组件时，不需要手动传递value和handleChange了，redux-form会自动处理这些逻辑：

<Field 
  name="paymentplan" 
  component={renderRadioGroup} 
  label="Do you wish to pay monthly or annually?" 
  fieldName="paymentplan" 
  options={[
    { "label" : "Monthly", "value" : "0" },
    { "label" : "Annually", "value" : "1" }
  ]} 
/>

3. 实现预选中单选按钮 #

要设置默认选中项，只需要在redux-form的表单配置里指定initialValues即可，比如你的表单组件是用reduxForm高阶组件包裹的：

import { reduxForm } from 'redux-form';

// 你的表单组件
const PaymentForm = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    {/* 上面的Field组件 */}
    <button type="submit" style={{marginTop: '1rem'}}>Submit</button>
  </form>
);

// 配置表单，设置initialValues指定默认选中值
export default reduxForm({
  form: 'paymentForm', // 表单唯一标识，不能重复
  initialValues: {
    paymentplan: "1" // 这里对应Annually选项的value，会自动预选中它
  }
})(PaymentForm);

4. 表单提交时获取选中值 #

当你提交表单时，redux-form会把所有字段的选中值收集到values对象中，直接在提交函数里拿就行：

const handleFormSubmit = (values) => {
  // values.paymentplan就是选中的单选按钮的值（"0"对应Monthly，"1"对应Annually）
  console.log('用户选择的支付计划：', values.paymentplan);
  // 这里可以写后续的API请求、状态更新等逻辑
};

// 在父组件中使用表单
<PaymentForm onSubmit={handleFormSubmit} />

这样调整后，redux-form会自动同步RadioGroup的选中状态到表单store里，预选中和提交取值的问题就都解决啦。

内容的提问来源于stack exchange，提问作者The Old County