Блог

Я пытаюсь создать фильтр, который фильтрует всех кандидатов на основе опыта. Я построил фильтр с помощью переключателей, который работает нормально, но проблема в том, что он не проверяется. ПО умолчанию я хочу, чтобы все радио 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>
                      ))}
 

Вы должны использовать defaultChecked в jsx. Потому что при использовании checked конечное значение никогда не менялось , но по умолчанию проверялась загрузка только при начальном рендеринге в 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>