반응 - 부트 스트랩 - 로그인 폼 - catch되지 않은 형식 오류를

Question

I가 다음 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 
} 

나는 다음과 같은 오류 얻을 로그인을 시도 : 나는 react-bootstrap를 사용하지 마십시오 경우

Uncaught TypeError: (0, _reactDom2.default) is not a function at Login.handleClick 

및 수행 내 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 
}