React中选中指定单选框时自动设置并禁用另一单选框

核心逻辑 #

当aggregation值变为1（对应“1 - Aucun agrégat”选项）时，需要完成两个关键操作：

• 自动将histograms配置更新为“Non”对应的编码
• 强制选中“Non”选项并保持整个单选组禁用状态

具体修改步骤 #

1. 添加aggregation变化监听

使用useEffect监听props.reportConfig.aggregation的变化，当切换到1时，自动触发histograms的更新：

import { useEffect } from 'react';

// 组件内部新增副作用逻辑
useEffect(() => {
  if (props.reportConfig.aggregation === 1) {
    // 找到"Non"对应的选项（根据实际name值调整判断条件）
    const nonOption = histogrammeDomain.find(item => item.name === "Non");
    if (nonOption) {
      // 调用父组件update方法更新histograms配置
      props.update(
        props.reportConfig.title,
        props.reportConfig.comment,
        props.reportConfig.aggregation,
        props.reportConfig.sharing,
        props.reportConfig.format,
        props.reportConfig.mapping,
        String(nonOption.code)
      );
    }
  }
}, [props.reportConfig.aggregation, histogrammeDomain, props.update]);

2. 强制控制checked状态

修改单选框的checked属性，确保当aggregation为1时，无论原有配置是什么，都强制选中“Non”选项：

<input
  type="radio"
  name="histogrammeSelection"
  value={codedValue.code}
  // 重构checked判断逻辑
  checked={
    props.reportConfig.aggregation === 1
      ? codedValue.name === "Non"
      : props.reportConfig.histograms === String(codedValue.code)
  }
  onChange={updateHistogramme}
  disabled={props.reportConfig.aggregation === 1}
/>

3. （可选）优化禁用样式

给禁用状态下的非“Non”选项添加灰化样式，减少用户混淆：

<label
  className={
    !config?.histogrammeEnabled.includes(codedValue.code) || 
    (props.reportConfig.aggregation === 1 && codedValue.name !== "Non")
      ? "text-gray"
      : ""
  }
>

完整修改后的组件代码 #

import { useState, useEffect } from 'react';

interface IConfig {
    aggregationEnabled: number[],
    formatEnabled: number[]
    cartographieEnabled: number[]
    histogrammeEnabled: number[]
}

interface ReportConfiguration {
    objectid: number|undefined,
    title: string,
    comment: string,
    aggregation: number,
    sharing: number,
    format: number,
    mapping: string,
    histograms: string,
    folder_list: FolderListConfiguration|undefined,
    author: string
}

const ReportLayoutSetter = (props: {
    reportConfig: ReportConfiguration,
    update: (title: string, comment: string, aggregation: number, sharing: number, format: number, mapping: string, histograms: string) => void
}) => {

const [config, setConfig] = useState<IConfig>()
const [aggregationDomain, setAggregationDomain] = useState<{name: string, code: number}[]>([])
const [histogrammeDomain, setHistogrammeDomain] = useState<{name: string, code: number}[]>([])

const updateHistogramme = (event: any) => {
        const newHistogramme = event.target.value
        props.update(props.reportConfig.title, props.reportConfig.comment, props.reportConfig.aggregation, props.reportConfig.sharing, props.reportConfig.format, props.reportConfig.mapping, newHistogramme)
    }

// 监听aggregation切换，自动设置histogramme为Non
useEffect(() => {
  if (props.reportConfig.aggregation === 1) {
    const nonOption = histogrammeDomain.find(item => item.name === "Non");
    if (nonOption) {
      props.update(
        props.reportConfig.title,
        props.reportConfig.comment,
        props.reportConfig.aggregation,
        props.reportConfig.sharing,
        props.reportConfig.format,
        props.reportConfig.mapping,
        String(nonOption.code)
      );
    }
  }
}, [props.reportConfig.aggregation, histogrammeDomain, props.update]);

return (
<tr>
  <td className="name"> Histogramme </td>
  <td className="value column-3">
    {histogrammeDomain.map((codedValue) => (
      <label
        className={
          !config?.histogrammeEnabled.includes(codedValue.code) || 
          (props.reportConfig.aggregation === 1 && codedValue.name !== "Non")
            ? "text-gray"
            : ""
        }
      >
        <input
          type="radio"
          name="histogrammeSelection"
          value={codedValue.code}
          checked={
            props.reportConfig.aggregation === 1
              ? codedValue.name === "Non"
              : props.reportConfig.histograms === String(codedValue.code)
          }
          onChange={updateHistogramme}
          disabled={props.reportConfig.aggregation === 1}
        />
        {codedValue.name}
      </label>
    ))}
  </td>
</tr>
)

}

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