如何從形式將信息傳遞到功能反應

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。