You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

单选按钮(Radio Button)出现异常多选问题求助

单选按钮(Radio Button)出现异常多选问题求助

各位好,我遇到了一个单选按钮组的诡异问题,想请大家帮忙排查一下:我用<UswdsRadioFieldSet>组件实现了一个单选按钮组,每个单选按钮的name和value都是唯一的,但现在只要选中「Custom Announcement」选项,系统会自动同时选中「The public」选项,完全不符合单选按钮互斥的预期。

问题相关代码

1. 单选组件渲染代码

<UswdsRadioFieldSet 
  isSearchable={true} 
  ariaLabel="hiring_paths" 
  data={props.filters.HiringPaths} 
  selectedItem={props.hiringFilters.HiringPath} 
  placeholder="Hiring Paths" 
  name="HiringPath" 
  onChangeFn={(val, name) => props.handleHiringFilters("HiringPath", val, name) } 
/>

2. 状态更新处理函数handleHiringFilters

handleHiringFilters = (key, val, name) => {
  console.log(key);
  console.log(val);
  console.log(name);
  
  let _value = key === "HiringPath" ? name : val;
  clearTimeout(this.dynamicSearchTimout);
  
  this.setState(
    {
      hiringFilters: key === "HiringPath" 
        ? { HiringPath: _value } 
        : { 
            ...this.state.hiringFilters, 
            [key]: _value.trim(), 
          },
    },
    (err) => {
      if (!err) {
        let data = _.map(this.state.hiringFilters);
        if (this.state.hiringFilters.hasOwnProperty("HiringPath")) {
          data = _.filter(this.state.hiringFilters, (o, key) => {
            return key == "HiringPath";
          });
        }
        let delimited = _(data).values().join(",")
        console.log('delimited here--');
        console.log(delimited);
        
        if (key === "HiringPath") {
          this.dynamicSearchTimout = setTimeout(() => {
            this.handleActiveFilters(key, val);
          }, 500);
        } else {
          this.handleActiveFilters(key, val);
        }
        
        if (key === "HiringPath") {
          this.getHiringPaths(val);
        }
      }
    }
  );
};

3. 故障场景对应的单选按钮HTML输出

(注:原问题中未贴完整HTML代码,若有具体输出可补充在此处,方便更精准排查)

我自己的初步排查

目前我检查了几个点但还没找到根因:

  • 确认了每个单选按钮的name属性统一、value唯一,符合单选组互斥的基础要求;
  • 打印了handleHiringFilters的入参,发现选中「Custom Announcement」时,name参数的值似乎有异常,会不会是组件内部传参时混进了两个选项的信息?
  • 状态更新逻辑里,HiringPath直接用name参数赋值,会不会这个参数在某些场景下拿到了多个值?

想请大家帮忙分析:

  • 会不会是UswdsRadioFieldSet组件内部的渲染逻辑有问题?比如没有正确绑定选中状态或name属性?
  • 我的setState更新HiringPath的逻辑有没有疏漏?比如直接覆盖hiringFilters对象导致组件重渲染时选中状态判断错误?
  • lodash工具函数的使用会不会间接导致了状态数据异常?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 13:34:34