は、私は次のログイン機能を持つログインモデルを持っている

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); 
    }); 
    } 

これが正常に動作しているので、どのように私はからの実際のデータを送信するために、これを変更できますか関数のハードコードされた情報の代わりにログインフォーム。これは完全な形式がどのように見えるされるログインモデルでの入力：あなたは状態から値を読み取るAPIを発射するとき

  <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

あなたはあなたの中に入力を追跡することができ、状態と。

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。