Reactのフォームが期待どおりに動作しない

Question

Reactには、アプリケーションにログインするためのフォームがあります。ログインするためのコード自体は正常に起動していませんが、ページを最初に読み込んでログイン情報を入力して[submit]をクリックすると、ログインするコードが起動しますが、ページがリロードされて空白のフォームが表示されます。再度ログイン資格情報を入力すると、期待どおり動作しますが、別のセッションが開始されます。私が間違ってやっていることに関するアイデアは？

import React from "react"; 
import ReactDOM from "react-dom"; 
import Router from "react-router"; 
import { Alert, Button, ControlLabel, FieldGroup, FormControl, FormGroup } from "react-bootstrap"; 

var Parse = require('parse'); 
var ParseReact = require('parse-react'); 
var ParseComponent = ParseReact.Component(React); 
var mylogin; 

export default class Login extends ParseComponent { 
    constructor(props) { 
    super(props); 
    this.login = this.login.bind(this); 
    mylogin = this; 
    } 

    observe(props, state) { 
    return { 
     user: ParseReact.currentUser 
    }; 
    } 

    static contextTypes = { 
    router: React.PropTypes.object.isRequired 
    } 

    static defaultProps = { 
    error: null 
    } 

    state = { 
    error: this.props.error, 
    } 

    login() { 
    var self = this; 
    var username = ReactDOM.findDOMNode(this.refs.username).value; 
    var password = ReactDOM.findDOMNode(this.refs.password).value; 
    function error() { 
     self.setState({ error: "Incorrect username or password" }); 
    } 
    if (username.length && password.length) { 
     Parse.User.logIn(username,password).then(function(success) { 
     // Successful Login. Redirect to Dashboard. 
     mylogin.context.router.push("/dashboard"); 
     }, function(err) { 
     // Log-in error. 
     error(); 
     }); 
    } else { 
     this.setState({ error: "Please enter all fields" }); 
    } 
    } 

    render() { 
     return (
      <div class="container" style={marginStyle}> 
      <form> 
       { 
       this.state.error ? 
       <Alert bsStyle="danger"> 
        {this.state.error} 
       </Alert> : 
       null 
       } 
       <FormGroup controlId="username"> 
       <ControlLabel>Username</ControlLabel> 
       <FormControl type="text" ref="username" placeholder="Username" /> 
       </FormGroup> 
       <FormGroup controlId="password"> 
       <ControlLabel>Password</ControlLabel> 
       <FormControl type="password" ref="password" placeholder="Password" /> 
       </FormGroup> 
       <Button onClick={this.login} type="submit"> 
       Login 
       </Button> 
      </form> 
      </div> 
     ); 
     } 
    } 

Answer 1

ボタンタイプ= "submit"でのデフォルトのフォーム動作は、実際にフォームを送信することです。あなたはその行動を防ぐ必要があります。ログインする最初の引数は、イベントでなければなりません、あなたはそれにevent.preventDefaultを呼び出すことができます。

...

login(e) { 
    e.preventDefault(); 
    var self = this; 
    var username = ReactDOM.findDOMNode(this.refs.username).value; 
    var password = ReactDOM.findDOMNode(this.refs.password).value; 
    function error() { 

...私はクラスの構文を持つスーパー慣れていないんだ

注意を（私はcreateClassのファンですが）これはあなたが記述したものに対する解決策です。イベントオブジェクトeが実際にすぐにアクセス可能であるかどうか、またはクラス構文ではアクセスできないかどうかはわかりません。

編集：いっそのこと、<form>にonSubmitにあるボタンからonClickアクションを移動してみてください。その後、上記のようにデフォルトを防止します。

Here's more from the docs。