reactjs - 正在将当前组件的状态作为参数发送到反应中可能的另一个外部方法

Question

/** @jsx React.DOM */

// create a login component
var Login = React.createClass({
  displayName: 'loginComp',
  getInitialState: function () {
    return {
      id_uname: 'u',
      id_pwd: 'p'
    };
  },
  onChange: function(e){
    if(e.target.name=="username")
      this.setState({id_uname: e.target.value});
    else
      this.setState({id_pwd: e.target.value});
  },
  handleSubmit: function (e) {
    console.log(this.state.id_uname);
    console.log(this.state.id_pwd);
  },
  render: function () {
    var objState = this.state;
    var asd = "asd";

    return (
      <fieldset>
        <input ref='username' type="text" name="username" onChange={this.onChange}/>
        <input ref='password' type="password"  name="password" onChange={this.onChange}/>
        <button ref='password' type="submit" onClick={this.props.handleSubmit(this.state) ||  this.handleSubmit}>Submit</button>
      </fieldset>
    );
  }
});

var sub = function(state){
  console.log('-- OUTSIDE--');
  console.log('-- --',state);
};

React.renderComponent(
  <Login handleSubmit={sub}/>,
  document.body
);

当我单击按钮时，它应该转到 sub 方法 .. 而 sub 方法响应每个状态更改，最后当我按下按钮时，它转到默认的 handleSubmit 方法 .. 帮助！

Answer 1

当你写

onClick={this.props.handleSubmit(this.state) ||  this.handleSubmit}

您正在this.props.handleSubmit立即调用处理程序并将其结果设置为 onClick 处理程序。我猜你想改为做一个部分应用程序，你可以使用.bind：

onClick={this.props.handleSubmit.bind(null, this.state)}

（此外，最好将特定的状态键显式传递给处理程序，否则您可能会在将来进行更改时意外地传递内部状态。）