自定义单选按钮输入无法按预期工作，重新渲染时反应

Question

我在styled-components 和react-typescript working code is here on codesandbox 的帮助下创建了一个自定义单选按钮。所以在这段代码中，当我在我的RadioButton 组件上明确地将checked 道具传递给true 时，它给了我一个选中的单选按钮，但是当我尝试选择另一个radio button 时，我需要单击它两次才能将其选中动画。同时在console log 中，当第一次单击时，它会给出另一个radio button 的更改值。但要获得该单选按钮上的selected animation，我需要单击它两次。

对于我的代码，我将 Real input 元素设置为对 opacity 不可见，并与我自定义创建的 RadioButton 重叠。 当我没有在组件上传递 checked 道具时，它很好工作。当我将 checked 道具传递给组件时，它会出现问题。

我不确定它是否与我的 custom 创建的 Radiobutton 或与重新渲染问题有关。

Answer 1

试试下面的方法

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" />
    </>
  );
};