反応-ブートストラップを - - ログインフォームログインしようと、私は次のエラーを取得するときにキャッチされない例外TypeError

Question

私は、次のlogin.js

import React, { Component, PropTypes } from 'react'; 
import { Button, Form, FormControl, FormGroup } from 'react-bootstrap'; 

export default class Login extends Component { 

    render() { 
     const {errorMessage} = this.props 

     return (
      <Form inline> 
       <FormGroup controlId="formInlineEmail"> 
        <FormControl type="email" ref="username" placeholder="Email"/> 
       </FormGroup> 
       <FormGroup controlId="formInlinePassword"> 
        <FormControl type="password" ref="password"/> 
       </FormGroup> 
       <Button type="submit" onClick={(event) => this.handleClick(event)}> 
        Login 
       </Button> 
       {errorMessage && 
       <p style={{color:'red'}}>{errorMessage}</p> 
       } 
      </Form> 
     ) 
    } 

    handleClick(event) { 
     const username = this.refs.username 
     const password = this.refs.password 
     const creds = { username: username.value.trim(), password: password.value.trim() } 
     this.props.onLoginClick(creds) 
    } 
} 

Login.propTypes = { 
    onLoginClick: PropTypes.func.isRequired, 
    errorMessage: PropTypes.string 
} 

を持っていますLogin.jsの次の部分は正常に動作します。

<div> 
    <input type='text' ref='username' className="form-control" style={{ marginRight: '5px' }} placeholder='Username'/> 
    <input type='password' ref='password' className="form-control" style={{ marginRight: '5px' }} placeholder='Password'/> 
    <button onClick={(event) => this.handleClick(event)} className="btn btn-primary"> 
    Login 
    </button> 

    {errorMessage && 
    <p style={{color:'red'}}>{errorMessage}</p> 
    } 
</div> 

Answer 1

聞かないでください、なぜこれが動作します：

import React, { Component, PropTypes } from 'react'; 
import { findDOMNode } from 'react-dom'; 
import { Button, ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap'; 

export default class Login extends Component { 

    handleSubmit(event) { 
     const username = findDOMNode(this.refs.username) 
     const password = findDOMNode(this.refs.password) 
     const creds = { username: username.value.trim(), password: password.value.trim() } 
     this.props.onLoginClick(creds) 
    } 

    render() { 
     const {errorMessage} = this.props 

     return (
      <Form inline> 
       <FormGroup controlId="formHorizontalEmail"> 
        <ControlLabel>Email </ControlLabel> 
        <FormControl type="username" ref="username" onChange={this.handleChange} placeholder="Email" /> 
       </FormGroup> 
       <FormGroup controlId="formHorizontalPassword"> 
        <ControlLabel>Password </ControlLabel> 
        <FormControl type="password" ref="password" onChange={this.handleChange} placeholder="Password" /> 
       </FormGroup> 
       <Button onClick={(event) => this.handleSubmit(event)}>Login</Button> 
       {errorMessage && 
       <p style={{color:'red'}}>{errorMessage}</p> 
       } 
      </Form> 
     ) 
    } 
} 

Login.propTypes = { 
    onLoginClick: PropTypes.func.isRequired, 
    errorMessage: PropTypes.string 
}