Question

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

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事件。所以我猜你的代码还有其他问题。

组件是否呈现？你可以提供一个不工作的小提琴，所以我可以看看吗？

Answer 2

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

React onChange事件不会触发

2 个答案: