Why isn't the onChange event firing in the input tag? I used LinkedStateMixin to track the input value before, but now I want to add an onChange event to run a function. After removing LinkedStateMixin, the onChange event still doesn't fire. I even tried adding e.stopPropagation() to setUsername(), but that didn't work either. Other events like onKeyDown and onClick also did not fire. What could be causing this issue?
var React = require('react');
var SessionActions = require('../../actions/session_actions');
var UserStore = require('../../stores/user_store');
var LogInForm = React.createClass({
getInitialState: function() {
return ({
user: undefined,
username: '',
password: '',
});
},
componentDidMount: function() {
this.token = UserStore.addListener(this.updateUserStore);
},
componentWillUnmount: function() {
this.token.remove();
},
updateUserStore: function() {
this.setState({user: UserStore.all()});
this.setState({username: ''});
this.setState({password: ''});
},
setUsername: function(e) {
console.log("Fired");
},
handleSubmit: function(e) {
e.preventDefault();
SessionActions.logIn({
username: this.state.username,
password: this.state.password
});
this.updateUserStore();
},
render: function() {
return (
<div>
<h4>Log In</h4>
<div> </div>
<form onSubmit={this.handleSubmit}>
<input onChange={this.setUsername} placeholder="Username" type="text"/>
<input placeholder="Password" type="password"/>
<input type="submit" value="Log In"/>
</form>
</div>
);
}
});
module.exports = LogInForm;