Блог

Я создал настраиваемый переключатель с помощью styled-components , и react-typescript рабочий код находится здесь, в codesandbox. Итак, в этом коде, когда я явно передаю checked props true в свой RadioButton компонент, он выдает мне отмеченный переключатель, но когда я пытаюсь выбрать другой radio button , мне нужно дважды щелкнуть по нему, чтобы получить выбранную анимацию. Между тем console log , при первом щелчке он выдает измененное значение другого radio button . но чтобы selected animation включить этот переключатель, мне нужно щелкнуть по нему дважды.

Для моего кода я сделал реальный input элемент невидимым opacity и наложил его на созданный на заказ RadioButton . Он отлично работает, когда я не передаю checked реквизиты компоненту. Это создает проблему, когда я передаю checked реквизиты компоненту.

Я не уверен, связано ли это с моим custom созданным Radiobutton или что-то связанное с проблемой повторного рендеринга.

Попробуйте следующий подход

 const App = () => {
  const [selectedValue, setSelectedValue] = useState<string | number>("first");
  console.log(selectedValue);

  const handleInputChange = (value: string | number): void => {
    setSelectedValue(value);
  };

  return (
    <>
      <RadioButton
        onChange={handleInputChange}
        label="first"
        value="first"
        checked={selectedValue === "first"}
      />
      <RadioButton onChange={handleInputChange} label="second" value="second" />
    </>
  );
};