反应 onChange 事件不会触发

Question

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

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 它不起作用的地方吗？

Answer 2

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

反应 onChange 事件不会触发

React onChange event does not fire

javascript

reactjs-flux