单选按钮(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
相关产品推荐
相关产品推荐

