如何在Ant Design中让第二个禁用Radio Group自动选中相反单选选项？

我正在用Ant Design的Form和Radio.Group组件制作一个表单，包含两个单选组：

• 性别选择：可选"Male"或"Female"
• 偏好性别（禁用状态）：自动选中第一个单选组的相反选项

当前代码如下：

import React, { useState } from 'react';
import { Form, Radio } from 'antd';

const MyComponent = () => {
  const [form] = Form.useForm();
  const [gender, setGender] = useState<boolean>(true); // true = Male, false = Female

  const handleGenderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setGender(e.target.value); // Update gender based on selection
  };

  return (
    <Form form={form}>
      {/* Gender Selection */}
      <p className="font-bold text-l pl-3">Gender:</p>
      <Form.Item
        name="gender"
        rules={[{ required: true, message: 'Please select your gender!' }]}
      >
        <Radio.Group onChange={handleGenderChange} value={gender}>
          <Radio value={true}>Male</Radio>
          <Radio value={false}>Female</Radio>
        </Radio.Group>
      </Form.Item>

      {/* Preferred Gender (Disabled) */}
      <p className="font-bold text-l pl-3">Preferred Gender:</p>
      <Form.Item name="preferredGender">
        <Radio.Group value={!gender} disabled>
          <Radio value={true}>Male</Radio>
          <Radio value={false}>Female</Radio>
        </Radio.Group>
      </Form.Item>

      {/* Submit Button */}
      <Form.Item>
        <button type="submit">Submit</button>
      </Form.Item>
    </Form>
  );
};

export default MyComponent;

请问如何实现偏好性别自动选中相反选项的功能？

你的代码有两个核心问题需要修正：

1. 值类型不匹配：handleGenderChange中e.target.value是字符串类型（选Male时为"true"，选Female时为"false"），但你定义的gender是布尔类型，直接赋值会导致类型错误，后续!gender的逻辑也会失效。需要把字符串转为布尔值。
2. 表单状态同步：偏好性别不仅要显示选中状态，还需要同步到Form的字段值中，否则提交表单时preferredGender字段可能为空。

修正后的代码（useState版本） #

import React, { useState } from 'react';
import { Form, Radio } from 'antd';

const MyComponent = () => {
  const [form] = Form.useForm();
  const [gender, setGender] = useState<boolean>(true); // true = Male, false = Female

  const handleGenderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 将字符串值转为布尔值
    const selectedGender = e.target.value === 'true';
    setGender(selectedGender);
    // 同步更新偏好性别到表单字段
    form.setFieldsValue({
      preferredGender: !selectedGender
    });
  };

  return (
    <Form form={form}>
      {/* Gender Selection */}
      <p className="font-bold text-l pl-3">Gender:</p>
      <Form.Item
        name="gender"
        rules={[{ required: true, message: 'Please select your gender!' }]}
      >
        <Radio.Group onChange={handleGenderChange} value={gender}>
          <Radio value={true}>Male</Radio>
          <Radio value={false}>Female</Radio>
        </Radio.Group>
      </Form.Item>

      {/* Preferred Gender (Disabled) */}
      <p className="font-bold text-l pl-3">Preferred Gender:</p>
      <Form.Item name="preferredGender">
        <Radio.Group value={!gender} disabled>
          <Radio value={true}>Male</Radio>
          <Radio value={false}>Female</Radio>
        </Radio.Group>
      </Form.Item>

      {/* Submit Button */}
      <Form.Item>
        <button type="submit">Submit</button>
      </Form.Item>
    </Form>
  );
};

export default MyComponent;

更简洁的Form Watch版本 #

可以利用Ant Design Form的watchAPI监听性别字段变化，省去单独的useState，让Form统一管理状态：

import React, { useEffect } from 'react';
import { Form, Radio } from 'antd';

const MyComponent = () => {
  const [form] = Form.useForm();
  // 监听gender字段的变化
  const gender = form.watch('gender');

  useEffect(() => {
    if (gender !== undefined) {
      // 同步更新偏好性别字段
      form.setFieldsValue({
        preferredGender: !gender
      });
    }
  }, [gender, form]);

  return (
    <Form form={form} initialValues={{ gender: true }}>
      {/* Gender Selection */}
      <p className="font-bold text-l pl-3">Gender:</p>
      <Form.Item
        name="gender"
        rules={[{ required: true, message: 'Please select your gender!' }]}
      >
        <Radio.Group>
          <Radio value={true}>Male</Radio>
          <Radio value={false}>Female</Radio>
        </Radio.Group>
      </Form.Item>

      {/* Preferred Gender (Disabled) */}
      <p className="font-bold text-l pl-3">Preferred Gender:</p>
      <Form.Item name="preferredGender">
        <Radio.Group value={!gender} disabled>
          <Radio value={true}>Male</Radio>
          <Radio value={false}>Female</Radio>
        </Radio.Group>
      </Form.Item>

      {/* Submit Button */}
      <Form.Item>
        <button type="submit">Submit</button>
      </Form.Item>
    </Form>
  );
};

export default MyComponent;

两种方式都能实现需求：选择性别后，偏好性别自动选中相反选项，同时保证表单字段值同步。

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