React input onChange won't fire

Question

I currently have this simple react app and I cannot get these onchange events to fire for the life of me.

var BlogForm = React.createClass({
getInitialState:         


        

Answer 1

The accepted answer is correct, BUT I wanted to add that, if you are implementing the radio group button solution as provided in the bootstrap documentation, make sure to remove the "data-toggle" option on the surrounding div:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
</div>

If you keep the data-toggle option as shown in the code above, the onClick and onChange events you added yourself to the input field will be ignored.

Answer 2

when you use :

onChange={this.changeTitle (this)}

react will call mentioned function automatically. you need to call the function like this:

onChange={this.changeTitle}

and also change your mentioned function to arrow function, otherwise you cant use "this" keyword in your function. in none arrow function "this" keyword is not object of your function so you cant access to your variables. if you need to pass arguments to your function you should use other methods like bind()

Answer 3

Try:

onChange={(evt) => this.changeTitle(evt)}

or:

onChange={this.changeTitle.bind(this)}

instead of:

onChange={this.changeTitle}

Answer 4

try moving the onChange to the parent div.. this worked for me