1

I'm confused a bit about how react handles onChange events for radio inputs:

var Hello = React.createClass({
onChange: function(e) {
  console.log(e);
},
render: function() {
  return (
    <form onChange={this.onChange}>
       <input type='radio' name='a' value="1" />
       <input type='radio' name='a' value="2" />
       <input type='checkbox' name='a' />
       <input type='checkbox' name='a1' />
    </form>
    )
  }
});

It seems for radio it fires event just once whereas for the checkbox type it works as expected?
what am i doing wrong?

please consider the fiddle

user683680
  • 79
  • 1
  • 8
  • Your fiddle doesn't match what you're trying to demonstrate. – Tyler Sebastian Jul 29 '17 at 22:44
  • 1
    Radios can be weird. React tries to normalise all inputs and how they fire an onChange but it does not quite work as you'd expect. You should get a radio group component that abstracts that for you (eg onClick => onChange) and bubble the `onChange` for general use. https://github.com/chenglou/react-radio-group – Dimitar Christoff Jul 30 '17 at 00:58
  • there has always been discussion and disagreement as to how to handle this in react itself. see https://github.com/facebook/react/issues/8727 etc - traditional DOMApi is just click. onChange was added for consistency in react api - does not mean it works as you expect it to. – Dimitar Christoff Jul 30 '17 at 01:00

2 Answers2

2

Add the onChange callback to the inputs instead of the whole form. You can read up more on that in this question Entire form onChange

jontro
  • 10,241
  • 6
  • 46
  • 71
  • @user683680 How does not that work? Check this updated fiddle https://jsfiddle.net/73rxtk2k/1/ (also fixed conflict with double naming of a) – jontro Jul 30 '17 at 16:46
1
In 15.6.1, the first change fires, but all subsequent changes do not fire. In 15.5.4, all changes fire.

It will be fixed in the 15.6.2 release https://github.com/facebook/react/issues/10168

user2591280
  • 11
  • 2