javascript - react 单选按钮在第一次点击时不起作用

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}。