javascript - react radio button doesn't work on the first click - Stack Overflow

admin管理员组

文章数量:1422881

I have a radio button using pure css, but it doesn't work on first click, it only work on the second click onward, not sure it has to do with my react prop or not:

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>
);

I have a radio button using pure css, but it doesn't work on first click, it only work on the second click onward, not sure it has to do with my react prop or not:

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

• javascript
• css
• reactjs
• sass

Share Improve this question Follow asked Mar 13, 2020 at 4:44 JenniferJennifer 34322 gold badges33 silver badges1212 bronze badges 1

• Did you read the error: Warning: Failed prop type: You provided a 'checked' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultChecked'. Otherwise, set either 'onChange' or 'readOnly'? – JMadelaine Commented Mar 13, 2020 at 5:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Use defaultChecked instead of checked={checked}.

本文标签： javascriptreact radio button doesn39t work on the first clickStack Overflow