反应 onChange 事件不会触发答案

【问题标题】：React onChange event does not fire反应 onChange 事件不会触发
【发布时间】：2016-12-04 16:49:12
【问题描述】：

问题是 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;

【问题讨论】：

标签： javascript reactjs-flux

【解决方案1】：

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

组件是否渲染？您能否提供一个无法正常工作的小提琴，以便我看看？

【讨论】：

感谢您的帮助！我试过你的小提琴，它在小提琴中工作，但我不明白为什么它对我的不起作用，这与我发布的完全相同。我正在使用 chrome，表单可以呈现，但 onChange 不会触发。我用的是webpack，你觉得会不会出问题？
我认为这不是 webpack 的问题，因为正在呈现表单。打开chrome dev tools，看看控制台是否打印了警告或错误。
我终于解决了这个问题！我将处理函数的名称从 setUsername() 更改为 handleUsername()，然后它就可以正常工作了！你知道为什么会这样吗？

【解决方案2】：

将函数名称从 setUsername 更改为 handleUsername。

【讨论】：