本文详解如何通过 Radio Button 实现单选式薪资范围筛选，并正确更新 API 请求参数，解决因误用 checked 状态或未适配单选逻辑导致的过滤失效问题。
本文详解如何通过 radio button 实现单选式薪资范围筛选，并正确更新 api 请求参数，解决因误用 `checked` 状态或未适配单选逻辑导致的过滤失效问题。
在 React 应用中，使用复选框（Checkbox）实现多选过滤（如就业类型）较为直观，但单选按钮（Radio Button）的处理逻辑有本质区别：它不依赖 checked 属性的切换状态，而是应始终以“当前被选中的唯一值”作为筛选依据。原代码中将 SalaryLists 处理逻辑照搬自 Checkbox 的多选模式（如判断 isChecked、增删数组），导致无法正确响应单选行为——因为 <input type="radio"> 的 event.target.checked 在用户切换选项时，前一个 radio 会自动变为 false，新选中的变为 true，但 onChange 仅触发于新选中的那个元素，此时若仍按“是否勾选”来增删数组，极易造成状态混乱或空值传递。
✅ 正确做法：用单一状态管理单选值
首先，在组件 state 中定义一个字符串型状态字段，用于存储当前选中的薪资范围 ID：
state = {
// 其他状态...
selectedSalaryRangeId: '', // 初始为空，表示未选择任何薪资范围
}接着，重写 SalaryLists 事件处理器，忽略 checked 判断，直接取 event.target.id 赋值（因为 radio 组中每次只有一个有效 id 被触发）：
SalaryLists = event => {
this.setState({ selectedSalaryRangeId: event.target.id })
}? 提示：无需判断
checked—— React 的 radio 机制保证onChange只会在用户选择某个选项时触发，且event.target.id即为最新选中项的唯一标识。
然后，在 renderJobsApi 中，将请求 URL 中的 package_per_annum 参数从原数组 SalaryList 改为该单一状态值：
renderJobsApi = async () => {
const { EmployList, selectedSalaryRangeId, searchInput } = this.state
// 注意：EmployList 是数组，需 join 为字符串；selectedSalaryRangeId 是字符串，可直接拼接
const employmentTypeParam = EmployList.join(',')
const JobsUrl = `https://apis.ccbp.in/jobs?employment_type=${employmentTypeParam}&package_per_annum=${selectedSalaryRangeId}&search=${searchInput}`
const jwtJobsToken = Cookies.get('jwt_token')
const JobOptions = {
method: 'GET',
headers: {
Authorization: `Bearer ${jwtJobsToken}`,
},
}
const response = await fetch(JobsUrl, JobOptions)
if (response.ok) {
const jobData = await response.json()
const updatedJobsData = jobData.jobs.map(jobItem => ({
companyLogoUrl: jobItem.company_logo_url,
employmentType: jobItem.employment_type,
id: jobItem.id,
jobDescription: jobItem.job_description,
location: jobItem.location,
packagePerAnnum: jobItem.package_per_annum,
rating: jobItem.rating,
title: jobItem.title,
}))
this.setState({ jobsList: updatedJobsData })
}
}? 补充注意事项
-
Radio 按钮必须共用
name属性：确保它们属于同一组，实现互斥选择。请在 JSX 中为所有 salary radio 添加name="salaryRange"：<input type="radio" name="salaryRange" // ? 关键！否则无法单选 value={each.label} onChange={this.SalaryLists} id={each.salaryRangeId} /> -
避免空值干扰 API：若用户尚未选择任何薪资范围，
selectedSalaryRangeId为空字符串''，此时 URL 中package_per_annum=将被忽略（后端通常支持该情况）。如需更健壮控制，可在拼接前做条件判断：const salaryParam = selectedSalaryRangeId ? `&package_per_annum=${selectedSalaryRangeId}` : '' const JobsUrl = `https://apis.ccbp.in/jobs?employment_type=${employmentTypeParam}${salaryParam}&search=${searchInput}` UI 同步建议：可为已选中的 radio 添加 CSS 样式（如
:checked + label { font-weight: bold; color: #0066cc; }），提升用户体验。
通过以上调整，薪资筛选即可与就业类型筛选解耦并独立生效：Checkbox 控制多值 EmployList 数组，Radio 控制单值 selectedSalaryRangeId 字符串，二者共同驱动 API 请求，实现精准、响应式的职位数据过滤。
