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: function() {
    return {
        title: '',
        content: ''
    };
},
changeTitle: function(event) {

    var text = event.target.value;

    console.log(text);

    this.setState({
        title: event.target.value
    });
},
changeContent: function(event) {
    this.setState({
        content: event.target.value
     });
},
addBlog: function(ev) {
    console.log("hit hit");
},
render: function() {
    return (
                <form onSubmit={this.addBlog(this)}>
                    <div>
                        <label htmlFor='picure'>Picture</label>
                        <div><input type='file' id='picture' value={this.state.picture} /></div>
                    </div>
                    <div>
                        <input className="form-control" type='text' id='content' value={this.state.title} onChange={this.changeTitle} placeholder='Title' />
                    </div>
                    <div>
                        <input className="form-control" type='text' id='content' value={this.state.content} onChange={this.changeContent} placeholder='Content' />
                    </div>
                    <div>
                        <button className="btn btn-default">Add Blog</button>
                    </div>
                </form>

    );
  }
});

Funny thing is when I use onChange={this.changeTitle (this)}, the event fires but the ev variable in the changeTitle function is not the correct one.

may I ask how you set it up, I knew this should have worked. — , Jan 31 '16 at 15:40
I copied your code exactly as you have it into the linked fiddle, http://jsfiddle.net/dx8mq8dj/2/ — Evan Davis, Jan 31 '16 at 15:47
Stop rolling back constructive edits. I also recommend you read https://stackoverflow.com/help/editing — Zoe, Feb 07 '22 at 16:43

score 23 · Answer 1 · edited Apr 11 '17 at 06:14

23

Try:

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

or:

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

instead of:

onChange={this.changeTitle}

edited Apr 11 '17 at 06:14

radiovisual

6,298
1
26
41

answered Jan 31 '16 at 16:11

Samuli Hakoniemi

18,740
1
61
74

onChange={(evt) => props.onChangeDate(evt)} using this paradigm: https://facebook.github.io/flux/docs/flux-utils.html – Chuck Han Mar 23 '17 at 05:40
14

If the function is bound correctly... why would all 3 of these not work? – Dmitry Minkovsky May 23 '17 at 15:04
1

Please explain why the top one does work and the bottom one does not – Mazzy Aug 21 '17 at 14:01
I know this is an old response, but you should never do the first two examples. It creates a major performance hit as it will create a done of additional renders. You should always use the third form. – samanime Jan 08 '20 at 15:58

score 4 · Answer 2 · answered Mar 12 '18 at 18:08

4

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

answered Mar 12 '18 at 18:08

Chris

425
3
12

1

This works fine. But do you know why it works? Because many examples show that onChange should be put in the component or input you are calling. – nucky Apr 23 '21 at 15:22

score 1 · Answer 3 · answered Jul 11 '19 at 08:33

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.

score 0 · Answer 4 · 2020-04-25T07:43:33.877

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

score 0 · Answer 5 · answered Nov 10 '22 at 10:14

0

Make sure you're not giving it an already given id. I'm not really why, but having duplicate ids for input with type file stops it from working.

answered Nov 10 '22 at 10:14

Boz

163
2
12

React input onChange won't fire

5 Answers5

Linked