Question

我有一个django注册表单，我最近更改为一个反应模式窗口，我像这样成功创建了模式

var WindowModal = React.createClass({

getInitialState(){
return {showModal: false};
},

close(){
this.setState({showModal: false});
 },

open(){
this.setState({showModal: true});
},

handleEmailChange: function(e) {
this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
this.setState({password: e.target.value});
},

handleSubmit(){
  console.log("EMail: " + this.state.email);
  console.log("Password: " + this.state.password);
},


render () {
return (

<div>

          <a onClick={this.open} className="action action-signin">Already have a Studio account? Sign In</a>

       <Modal show={this.state.showModal} onHide={this.close}>
         <Modal.Header closeButton>
           <Modal.Title className="modal-title">Sign In</Modal.Title>
         </Modal.Header>
         <Modal.Body>
           <h1>Sign In to Studio</h1>

             <Form horizontal>
  <FormGroup controlId="formHorizontalEmail">
    <Col componentClass={ControlLabel} sm={2}>
      Email
    </Col>
    <Col sm={10}>
      <FormControl type="email" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange}/>
    </Col>
  </FormGroup>

  <FormGroup controlId="formHorizontalPassword">
    <Col componentClass={ControlLabel} sm={2}>
      Password
    </Col>
    <Col sm={10}>
      <FormControl type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/>
    </Col>
  </FormGroup>

  <FormGroup>
    <Col smOffset={2} sm={10}>
      <Button type="submit" onClick={this.handleSubmit}>
        Sign in
      </Button>
    </Col>
  </FormGroup>
</Form>
         </Modal.Body>
         <Modal.Footer>
           <Button onClick={this.close}>Close</Button>
         </Modal.Footer>
       </Modal>
     </div>

  );
  }
  });

我需要的是当我点击提交按钮时，我的数据被传递到django视图进行处理，所以我想知道如何设置我的表单以具有指向视图的动作属性

Answer 1

您可以考虑将django视图升级为接受登录参数的API，然后在react handleSubmit()函数中，使用ajax post命中该API，然后在回调中返回值API将指导您接下来的步骤（显示错误的用户名/密码或重定向到另一个反应路径）

添加操作以响应表单以重定向

1 个答案: