javascript - React onChange 事件不会触发

Question

问题是 onChange 事件不会在输入标记中触发。我之前使用 LinkedStateMixin 来跟踪输入值。最近，我想添加 onChange 事件来运行一些函数，然后我删除了 LinkedStateMixin，但 onChange 无法触发。我尝试将 e.stopPropagation() 添加到 setUsername()，但它也不起作用。我尝试了其他事件，例如 onKeyDown、onClick 等。他们中没有人可以被解雇。有什么问题吗？

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;

Answer 1

我创建了this jsfiddle使用您发布的代码，尽管有明显的警告，但 onchange 事件仍被触发。所以我猜你的代码还有其他问题。

组件是否渲染？你能提供一个无法使用的 fiddle ，以便我看一下吗？