Reactjs 单选按钮没有得到正确检查

Question

我正在尝试构建一个过滤器，根据经验过滤所有候选人。我已经使用发送工作正常的单选按钮构建了过滤器，但问题是它没有得到检查。默认情况下，我希望在用户单击一个 btn 时不检查每个无线电 btn，然后应该检查它。当我单击 btn 时，它会过滤候选人，但未检查单选按钮本身。我的组件很大，这就是为什么我只提供了你们都需要的代码。 请帮助我正确设置单选按钮上的检查。 谢谢

        //i'm importing this array and using it in my component
export const filtersByExp = [
  {
    value: 0,
    label: "Fresher",
  },
  {
    value: 1,
    label: "1 year above ",
  },
  {
    value: 2,
    label: "2 year above ",
  },
  {
    value: 3,
    label: "3 year above  ",
  },
  {
    value: 4,
    label: "4 year above  ",
  },
  {
    value: 5,
    label: "5 year above  ",
  },
];

      //component
  const [filter, setFilter] = useState({
    stage: "all",
    exp: null,
    job_id: null,
  });
 const handleRadioChange = ({ target }) => {
            let value = target.value;
            let name = target.name;
            setFilter({
              ...filter,
              [name]: value,
            });
          };
        
    //jsx
        {[...filtersByExp].map((item) => (
                        <div key={item.value} className="mb-2">
                          <Form.Check
                            type="radio"
                            label={item.label}
                            name="exp"
                            checked={filter.exp === item.value}
                            onChange={handleRadioChange}
                            value={item.value}
                          />
                        </div>
                      ))}

Answer 1

您必须在 jsx 中使用 defaultChecked。因为如果使用checked，最终值永远不会改变，但 defaultChecked 只是在 react 的初始渲染中加载。

<div key={item.value} className="mb-2">
    <Form.Check
        type="radio"
        label={item.label}
        name="exp"
        defaultChecked={filter.exp === item.value}
        onChange={handleRadioChange}
        value={item.value}
    />
</div>