反应单选按钮在第一次单击时不起作用

Question

我有一个使用纯 css 的单选按钮，但它在第一次单击时不起作用，它只在第二次单击时起作用，不确定它是否与我的 React prop 有关：

const Radio = ({ id, name, value, checked, children }) => (
  <div className="radioBtn">
    <input type="radio" value={value} id={id} name={name} checked={checked} />
    <label className={"radio"} htmlFor={id}>
      <span className={"big"}>
        <span className={"small"} />
      </span>
      <span>{children}</span>
    </label>
  </div>
);

https://codesandbox.io/s/react-sass-34b8w

Answer 1

使用defaultChecked而不是checked={checked}.