反応ブートストラップと反応+還元> FormControl>値を取得

Question

私はreact + reduxを反応ブートストラップコンポーネントと併用しています。 FormControlテキスト要素（電子メール）の値を派遣された控除アクションに渡したいと思いますが、それを行う方法はわかりません。

class LoginForm extends React.Component { 
    render() { 
     const email = React.findDOMNode(this.refs.email); 

     return (
      <div> 
       <Form horizontal> 
        <FormGroup controlId="formHorizontalEmail"> 
         <Col componentClass={ControlLabel}>Email</Col> 
         <Col><FormControl type="email" ref="email"/></Col> 
        </FormGroup> 

        <FormGroup> 
         <Col> 
          <Button type="submit" block>Sign in</Button> 
         </Col> 
        </FormGroup> 
       </Form> 

       <Button onClick={() => this.props.doLogin(email, 'password')}>Login</Button> 
      </div> 
     ) 
    } 
} 

/** 
* Connect staff. 
*/ 
const mapStateToProps = (state) => { 
    return { 
     ... 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     doLogin: (email, password) => dispatch(performLogin(email, password)) 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm) 

Answer 1

（私の研究による）リアクトでFormControlのテキスト値を読み取る方法唯一の方法はこれです：

class LoginForm extends React.Component { 
    handleOnChange = (event) => { 
     this.setState({ [event.target.id]: event.target.value }, null); 
    } 

    render() { 
     return (
      <div> 
       <Form horizontal> 
        <FormGroup controlId="email"> 
         <Col componentClass={ControlLabel}}>Email</Col> 
         <Col> 
          <FormControl type="email" placeholder="Email" onChange={this.handleOnChange} 
          /> 
         </Col> 
        </FormGroup> 

        <FormGroup controlId="password"> 
         <Col componentClass={ControlLabel} sm={2}>Password</Col> 
         <Col> 
          <FormControl type="password" placeholder="Password" onChange={this.handleOnChange} /> 
         </Col> 
        </FormGroup> 

        <FormGroup> 
         <Col> 
          <Button onClick={() => this.props.doLogin(this.state.email, this.state.password)}>Submit</Button> 
         </Col> 
        </FormGroup> 
       </Form> 
      </div> 
     ) 
    } 
}