React Router: вход в систему - PullRequest
Новая
       12

React Router: вход в систему

0 голосов
/ 07 мая 2018

Я новичок в React & Router и пытаюсь настроить очень простую форму входа и перенаправления.

Я не совсем понимаю, куда мне поместить свой «логический код» (вызов ajax и перенаправление).

Это то, что я получаю, когда пытаюсь войти в систему .. 

GET security/login?callback=jQuery33102958950754760552_1525660032193&format=json&_=1525660032194 40 5()

Это должно быть " POST ", а не " GET "

Вот что я написал. 

import React from "react";
import { Link } from "react-router-dom";
import $ from "jquery";

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userid: "",
      password: "",
      submitted: false
    }


    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(e) {

    e.preventDefault();
    var root = 'security/login';
    //var userid = $("#userid").val();
     // var password = $("#password").val();

      var formData = {
                      "userId"    : $('input[name=userid]').val(),//$('input[name=userid]').val()
                      "password"  : $('input[name=password]').val()//$('input[name=password]').val()
                    };


      var jsondata = JSON.stringify(formData);
          console.log(jsondata);
    alert("test" +jsondata);

    $.ajax({
      url: root,
      method: 'POST',
      data: {
        format: 'json'
     },
     contentType : "application/json; charset=utf-8",
     error: function() {
        $('#info').html('<p>An error has occurred</p>');
     },
     headers: {
      'Content-Type': 'application/json', /*or whatever type is relevant */
      'Accept': 'application/json' /* ditto */
    },
     dataType: 'jsonp',
     encode      : true,
     success: function(data, response) {
       alert(+data.status.message);
        var $title = $('<h1>').text(data.talks[0].talk_title);
        var $description = $('<p>').text(data.talks[0].talk_description);
        $('#info')
           .append($title)
           .append($description);
     }     
  });
      //done(Login.function(data)
      // {
      // this.setState({});
      // console.log(this.state.data);
      // }


    }  


    render() {
    // const { loggingIn } = this.props;
    // const { userid, password, submitted } = this.state;
    return (

      <div className="container">
        <div className="col-md-5 col-md-offset-13 login-form text-center">
          <div className="form-top">
            <div className="form-top-left">
              <h3>LOGIN PAGE</h3>
              <p>Please enter your userID and password</p>
            </div>
          </div>

          <form onSubmit={this.handleSubmit}>
            <div className="input-group col-lg-10 col-md-offset-1">
              <span className="input-group-addon">
                <i className="glyphicon glyphicon-user" />
              </span>
              <input
                className="form-control"
                placeholder="UserID"
                name="userid"
                id="userid"
                type="text"
                required
              />
            </div>

            <div className="input-group  col-lg-10 col-md-offset-1">
              <span className="input-group-addon">
                <i className="glyphicon glyphicon-lock" />
              </span>
              <input
                type="password"
                name="password"
                id="password"
                className="form-control"
                placeholder="Password"
                required
              />
            </div>

            <button type="submit"
              className="btn btn-danger btn-block col-xs-6 col-lg-11"
              id="login">
            >
              LOGIN
            </button>
          </form>

          <div className="form-footer">
            <div className="row">
              <div className="col-xs-7 blink">
                <i className="fa fa-unlock-alt" />



              </div>
            </div>
          </div>
        </div>
      </div>
  );
  }
}

export default Login;

Надеюсь, вы все можете мне помочь ... Заранее спасибо

...