React Router中如何通过动态id判断checkbox/radio的选中状态

实现方案 #

方案1：配置选项数组批量渲染（最推荐） #

把排序选项抽成配置数组，通过map循环渲染单选框，天然就可以拿到每一项的id做判断，完全不需要硬编码匹配值，后续加新的排序规则直接改配置数组即可：

import { useSearchParams } from 'react-router-dom';

// 抽离排序选项配置，后续扩展直接加元素即可
const sortOptions = [
  { id: 'asc', label: 'Ascending' },
  { id: 'desc', label: 'Descending' }
];

const SearchParams = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const currentSort = searchParams.get('sort'); // 提前取值减少重复调用
  const handleChange = (event) => {
    const { name, id } = event.target;
    setSearchParams({ [name]: id });
  };

  return (
    <div>
      {sortOptions.map(option => (
        <React.Fragment key={option.id}>
          <input
            type="radio"
            name="sort"
            id={option.id}
            onChange={handleChange}
            checked={currentSort === option.id}
          />
          <label htmlFor={option.id}>{option.label}</label>
          <br />
        </React.Fragment>
      ))}
    </div>
  );
};

export default SearchParams;

方案2：抽离公共单选组件（如果不想改动现有渲染结构） #

把单个单选框逻辑封装成组件，把id作为props传入组件内部做判断：

import { useSearchParams } from 'react-router-dom';

// 抽离公共排序单选组件
const SortRadio = ({ id, label }) => {
  const [searchParams, setSearchParams] = useSearchParams();
  return (
    <>
      <input
        type="radio"
        name="sort"
        id={id}
        onChange={(e) => setSearchParams({ [e.target.name]: e.target.id })}
        checked={searchParams.get('sort') === id}
      />
      <label htmlFor={id}>{label}</label>
      <br />
    </>
  )
}

const SearchParams = () => {
  return (
    <div>
      <SortRadio id="asc" label="Ascending" />
      <SortRadio id="desc" label="Descending" />
    </div>
  );
};

export default SearchParams;

两种方案都完全规避了硬编码的匹配逻辑，符合你要的checked = {searchParams.get('sort') === elementId}的实现要求。

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