React JS中点击Switch按钮控制另一Switch启用/禁用问题排查

需求回顾 #

• 初始状态下禁用Switch B（benefitRequired）
• 当Switch A（benefitEnabled）开启时，启用Switch B
• 当Switch A关闭时，强制将Switch B设为关闭状态并禁用

原代码问题分析 #

1. 直接修改props.productBenefitDetailsDto：React中props是只读的，直接修改会导致状态不同步，也不符合组件设计规范
2. Switch B的disabled逻辑错误：当前逻辑无法正确根据A的状态控制B的禁用状态
3. 表单状态与组件state未同步：使用Ant Design Form组件时，应该通过Form的API管理字段值，而非单独维护冗余state变量
4. A关闭时的联动逻辑不完整：未正确触发Form更新B的状态

修复后的完整代码 #

JSX部分 #

<Col span={2}>
  <Form.Item
    {...this.props.field}
    name={[this.props.field.name, 'benefitEnabled']}
    fieldKey={[this.props.field.fieldKey, 'benefitEnabled']}
    valuePropName="checked"
    initialValue={true}
  >
    <Switch
      disabled={this.props.isAuth}
      checkedChildren={<CheckOutlined />}
      unCheckedChildren={<CloseOutlined />}
      onChange={this.handleBenefitEnabledChange}
    />
  </Form.Item>
</Col>
<Col span={2}>
  <Form.Item
    {...this.props.field}
    name={[this.props.field.name, 'benefitRequired']}
    fieldKey={[this.props.field.fieldKey, 'benefitRequired']}
    valuePropName="checked"
    initialValue={false}
  >
    <Switch
      disabled={!this.props.form.getFieldValue([this.props.field.name, 'benefitEnabled']) || this.props.isAuth}
      checkedChildren={<CheckOutlined />}
      unCheckedChildren={<CloseOutlined />}
      onChange={this.handleBenefitRequiredChange}
    />
  </Form.Item>
</Col>

Class组件部分 #

interface Prop {
    productBenefitDetailsDto: ProductBenefitDetailsDto;
    srccTcCodeList: Array<SrccTcCodeDto>;
    tcCodeList: Array<TcCodeDto>;
    srccTcGroupItem: WrapperListItem
    required: boolean;
    enable: boolean;
    field: any;
    isAuth: boolean;
    form: any; // 需添加form属性，由Form组件注入
}

interface State {
    openCollapse: boolean;
    srccTcCodeList: SrccTcCodeDto
    tcCodeList: TcCodeDto
    tcRates: any
    srccRates: any
    availableTc: boolean
    availableSrcc: boolean
    loading: boolean,
    dropdownLoading: boolean
    applicableType: boolean
}

const columns = [
    {title: 'Benefit Amount', dataIndex: 'benefitAmount', key: 'benefitAmount'},
    {title: 'Core Benefit Code', dataIndex: 'coreBenefitCode', key: 'coreBenefitCode'},
    {title: 'Benefit Min Amount', dataIndex: 'benefitMinAmount', key: 'benefitMinAmount'},
    {title: 'BenefitLimit', dataIndex: 'benefitLimit', key: 'benefitLimit'},
    {title: 'Excess Amount', dataIndex: 'excessAmount', key: 'excessAmount'},
    {title: 'Excess Prem Limit', dataIndex: 'excessPremLimit', key: 'excessPremLimit'},
    {title: 'Vehicle Age From', dataIndex: 'vehicleAgeFrom', key: 'vehicleAgeFrom'},
    {title: 'Vehicle Age To', dataIndex: 'vehicleAgeTo', key: 'vehicleAgeTo'},
]

export class BenefitComp extends React.Component<Prop, State> {
    constructor(prop: Prop) {
        super(prop);
        this.state = {
            loading: false,
            dropdownLoading: false,
            openCollapse: false,
            tcRates: "",
            srccRates: "",
            availableTc: false,
            availableSrcc: false,
            srccTcCodeList: {description: "", benefitCode: ""},
            tcCodeList: {description: "", benefitCode: ""},
            applicableType: true
        };
    }

    openCollapse = () => {
        this.setState({openCollapse: !this.state.openCollapse});
    };

    handleBenefitEnabledChange = (checked: boolean) => {
        // 当A关闭时，强制设置B为关闭状态
        if (!checked) {
            this.props.form.setFieldsValue({
                [this.props.field.name]: {
                    ...this.props.form.getFieldValue(this.props.field.name),
                    benefitRequired: false
                }
            });
        }
    };

    handleBenefitRequiredChange = (checked: boolean) => {
        // 正常更新B的状态，Form会自动同步
    };
}

关键修改说明 #

1. 依赖Form API管理状态：使用form.getFieldValue获取A的状态，form.setFieldsValue更新B的状态，避免直接修改props和冗余state
2. 修正Switch B的禁用逻辑：disabled属性由A的状态和isAuth共同控制，当A未开启或isAuth为true时禁用B
3. 初始化设置：给Switch B的Form.Item添加initialValue={false}，确保初始状态为关闭
4. 简化联动逻辑：A的change事件中，仅在关闭时强制重置B的状态，其余情况由Form自动管理
5. 移除冗余state：删除checkedType、checked等不必要的状态变量，减少状态管理复杂度

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