如何从形式将信息传递到功能反应

Question

我有以下登录功能的登录模式：

login() { 
    console.log("Hello. It's Me") 
    axios.post('https://crossorigin.me/http://requestb.in/w21igbw2', { 
     firstName: 'Fred', 
     lastName: 'Flintstone' 
    }) 
    .then(function (response) { 
     console.log(response); 
     //this.setState({ showModal: false }); 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
    } 

这是工作的罚款，所以我怎么改变这种从发送实际数据登录表单而不是函数中的硬编码信息。在登录该模型的输入是完整的形式是什么样子：

  <form> 
      <FormGroup > 
       <Row> 
       <Col md={12}> 
        <input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/> 
        <input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/> 
       </Col> 
       </Row> 
       <Row className='top-space'> 
       <Col md={5} mdOffset={1}> 
        <Checkbox className="checkbox-login"> Remember Me </Checkbox> 
       </Col> 
       <Col md={6} className='forgot-password'> 
        <a href="">Forgot Password</a> 
       </Col> 
       </Row> 
       <Row className='top-space'> 
       <Col md={10} mdOffset={1}> 
        <Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button> 
       </Col> 
       </Row> 
      </FormGroup> 
      </form> 

Answer 1

您可以跟踪的投入在你的国家，当你火API从状态读取的值。

constructor(){ 
    super() 
    this.state = { 
    email : null, 
    password : null, 
    } 

    onChangeEmail(){ 
    this.setState({email: e.target.value}); 
    } 

    onChangePassword(){ 
    this.setState({password: e.target.value}); 
    } 

    login(){ 
     //api call with state values for id and pass 
    } 

    render(){ 
    <form> 
      <FormGroup > 
       <Row> 
       <Col md={12}> 
        <input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email" onChange={this.onChangeEmail}/> 
        <input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password" onChange={this.onChangePassword}/> 
       </Col> 
       </Row> 
       <Row className='top-space'> 
       <Col md={5} mdOffset={1}> 
        <Checkbox className="checkbox-login"> Remember Me </Checkbox> 
       </Col> 
       <Col md={6} className='forgot-password'> 
        <a href="">Forgot Password</a> 
       </Col> 
       </Row> 
       <Row className='top-space'> 
       <Col md={10} mdOffset={1}> 
        <Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button> 
       </Col> 
       </Row> 
      </FormGroup> 
      </form> 
    } 
} 

P.S：我会强烈建议使用Redux的反应并使用Redux的形式来处理你的形式。这是迄今为止我发现的最好的方式来处理react-redux应用程序中的表单。你可以看看here。