在React和ES2015 classes一起使用时，应将this设置为事件处理程序

class Form extends React.Component {
  constructor(props) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
  }    

  handleSubmit(e) {
    e.preventDefault();

    let loginInput = this.refs.login;
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  }

  render() {
    return(
      <form onSubmit={ this.handleSubmit }>
        <input placeholder="githug login" ref="login" />
        <button>Add Login</button>
      </form>
    );
  }
}

Example
No Autobinding
方法遵循与常规ES6类相同的语义，这意味着它们不会自动将this绑定到示例。你必须显式地使用.bind（this）或箭头函数=>。

您需要将button或input与type="submit"一起使用

<button type="submit">Submit</button>

或者

<input type="submit" value="Submit" />

一个明显的信息：别忘了在<form>中包含您的按钮。我被卡住了一段时间，直到我发现我把我的提交按钮放在了我的表单外面，就像这样：

<form onSubmit={ this.handleSubmit }>
    <input placeholder="githug login" ref="login" />
  </form>            
  <button type="submit">Add Login</button>

因此onSubmit事件没有被调用，并且永远不会被调用。

对我来说，这是因为表单没有设置action属性。

<form onSubmit={this.handleSubmit} action="#">
    <input placeholder="githug login" ref="login" />
    <button>Add Login</button>
</form>

我遇到了这种情况，提交处理程序只是将一个新位置推到历史记录中。提交我的表单会刷新页面，把我留在旧的位置。我在提交处理程序的开头使用event.preventDefault()修复了这个问题。

如果你使用的是功能组件，那么确保你的按钮的类型是“Submit”而不是“button”。这就是我做错的！

正如@Bernat在comment中提到的那样。
额外信息：以编程方式提交表单不会调用onSubmit回调。用type="submit"添加button成功。
这意味着这段代码不会触发onSubmit函数：

class Form extends React.Component {

    submitProgrammatically() {
        const element = document.querySelector(`form`);
        element.submit(); // <-- will NOT trigger onSubmit
    }

    render() {
        return(
            <form onSubmit={(e) => {
                e.preventDefault();
            }}>
                <input placeholder="githug login" ref="login" />
                <button type="submit">Add Login</button>
            </form>
        );
    }
}

而这段代码将触发onSubmit

class Form extends React.Component {

    submitProgrammatically() {
        const element = document.querySelector(`form button[type='submit']`);
        element.click(); // <-- will trigger handleSubmit
    }

    render() {
        return(
            <form onSubmit={(e) => {
                e.preventDefault();
            }}>
                <input placeholder="githug login" ref="login" />
                <button type="submit">Add Login</button>
            </form>
        );
    }
}