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.
Answer
Try:
onChange={(evt) => this.changeTitle(evt)}
or:
onChange={this.changeTitle.bind(this)}
instead of:
onChange={this.changeTitle}