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 with react并使用 redux-form 来处理表单。这是我迄今为止在react-redux应用程序中处理表单的最佳方法。您可以查看here。

如何将表单中的信息传递给函数进行反应

1 个答案: