• Wir präsentieren Dir heute ein Stellenangebot für einen Java Entwickler - m/w/d in Augsburg, München, Stuttgart oder Bamberg. Hier geht es zur Jobanzeige

React Page öffnen

B

backyardCoder

Mitglied
Hallo zusammen
Ich nutze React (erste Projekt und daher kenne ich mich nicht gut aus) . Ich möchte nachdem das Login korrekt war, calender.js anzeigen lassen. Das Problem ist, das ich es nicht schaffe calender.js zu öffnen.
Bei der Methode doLogin() in der Klasse LoginForm.js wird geprüft ob die Serverantwort -1 ist, wenn sie != -1 ist dann war das Login erfolgreich und es sollte Calendar.js geöffnet werden (Was eigentlich in der Methode showCalendar() vorgesehen ist.)

Ich habe es schon auf verschiedene Arten versucht, jedoch hat keine funktioniert. Habt ihr villeicht einen Lösungsvorschlag.
Ich habe es schon mit "Redirect" und mit "userhistory()" versucht (eventuell hab ich dort auch einen Fehler gemacht, da ich bei userHistory immer einen Fehler mit den Hooks erhalten habe den ich nicht lösen konnte.)

App.js:
import React, { Component } from "react";
import { observer } from "mobx-react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import UserStore from "./stores/UserStore";
import Home from "./Home";
import UserList from "./UserList";
import Calendar from "./Calendar";

class App extends React.Component {
  componentDidUpdate() {
    if (UserStore.id != -1 && UserStore.id != 0) {
      console.log(UserStore.id);
      console.log("Calendar");
    }
  }

  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/calendar">Calendar</Link>
              </li>
              <li>
                <Link to="/userlist">Userlist</Link>
              </li>
            </ul>
          </nav>

          {/* A <Switch> looks through its children <Route>s and
                renders the first one that matches the current URL. */}
          <Switch>
            <Route path="/calendar">
              <Calendar />
            </Route>
            <Route path="/userlist">
              <UserList />
            </Route>
            <Route path="/">
              <Home />
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

ReactDOM.render(<App />, document.querySelector("#app"));

Die Links habe ich als Test hinein genommen, über diese kann ich Calendar.js problemlos öffnen. Ich möchte jedoch das es automatisch geschied wenn das Login korrekt war (Methode doLogin() in LoginForm überprüft die Serverantwort)

Home.js:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserStore from "./stores/UserStore";
import LoginForm from "./components/LoginForm";
import RegisterForm from "./components/RegisterForm";

class Home extends React.Component {
  render() {
    return (
      <div className="home">
        <LoginForm />
        <RegisterForm />
      </div>
    );
  }
}

export default Home;

Calendar.js:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserStore from "./stores/UserStore";
import LoginForm from "./components/LoginForm";
import RegisterForm from "./components/RegisterForm";

class Home extends React.Component {
  render() {
    return (
      <div className="home">
        <LoginForm />
        <RegisterForm />
      </div>
    );
  }
}

export default Home;

LoginForm.js:
import axios from "axios";
import React from "react";
import InputField from "./InputField";
import SubmitButton from "./SubmitButton";
import UserStore from "../stores/UserStore";
import Header from "./Header";
import Calendar from "../Calendar";
import { Link, Redirect } from "react-router-dom";
import { result } from "lodash";
import { Route, Router, useHistory } from "react-router";

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      buttonDisabled: false,
    };
  }

  setInputValue(property, value) {
    value = value.trim();
    if (value.length > 25) {
      return;
    }
    this.setState({
      [property]: value,
    });
  }

  resetForm() {
    this.setState({
      email: "",
      password: "",
      buttonDisabled: false,
    });
  }
  showCalendar() {
    console.log("showCalendar");
  }

  doLogin() {
    if (!this.state.email) {
      console.log("'Email' darf nicht leer sein");
      return;
    }
    if (!this.state.password) {
      console.log("'Passwort' darf nicht leer sein");
      return;
    }
    this.setState({
      buttonDisabled: true,
    });
    axios
      .post(
        "http://localhost:8080/api/login",
        {
          userEmail: this.state.email,
          userPassword: this.state.password,
        },
        {
          withCredentials: true, //ein Cookie wird gesetzt
        }
      )
      .then((response) => {
        if (response.data != -1) {
          console.log("login erfolgreich", response);
          UserStore.isLoggedIn = true;
          UserStore.id = response.data; //current user id wird zugewiesen
          UserStore.email = this.state.email;
          this.showCalendar();
          console.log("current_user_id: " + UserStore.id);
          this.resetForm();
      
        } else {
          console.log("login fehlgeschlagen", response);
          this.resetForm();
        }
      })
      .catch((error) => {
        console.log("API-Call fehlgeschlagen", error);
        this.resetForm();
      });
  }

  render() {
    return (
      <div className="loginForm">
        <Header name="Login" />
        <InputField
          type="email"
          placeholder="Email"
          value={this.state.email ? this.state.email : ""}
          onChange={(value) => this.setInputValue("email", value)}
        />
        <InputField
          type="password"
          placeholder="Password"
          value={this.state.password ? this.state.password : ""}
          onChange={(value) => this.setInputValue("password", value)}
        />
        <SubmitButton
          text="Login"
          disabled={this.state.buttonDisabled}
          onClick={() => this.doLogin()}
        />

      </div>
    );
  }
}
export default LoginForm;

in der Methode doLogin() wird die Antwort vom Server geprüft wenn die Antwort !=-1 ist war das Login erfolgreich und ich möchte die calendar.js datei öffenn lassen, was in der Methode showCalendar passieren sollte.

UserStore.js:
import { extendObservable } from "mobx";

/**
 * Daten des momentan angemeldeten User speichern
 */

class UserStore {
  constructor() {
    extendObservable(this, {
      isLoggedIn: false,
      email: "",
      userName: "",
      id: 0,
    });
  }
}

export default new UserStore();

Freundliche Grüsse und ich bedanke mich schon mal für die Hilfe
 
Zuletzt bearbeitet:
Ähnliche Java Themen
  Titel Forum Antworten Datum
WinterLLL React-App Fehlermeldung Angular, React, JQuery - Fragen zu JavaScript 2
T Meine Page läuft unter Windows aber nicht unter Mac Angular, React, JQuery - Fragen zu JavaScript 7
I Chrome Erweiterung zum öffnen von Files Angular, React, JQuery - Fragen zu JavaScript 0
J Zielseite in Popupfenster öffnen Angular, React, JQuery - Fragen zu JavaScript 3
J von der index seite neue Seite in Popup Fenster öffnen Angular, React, JQuery - Fragen zu JavaScript 1
J Autmatisch neue url öffnen Angular, React, JQuery - Fragen zu JavaScript 3
Y Javascript onclick box öffnen Angular, React, JQuery - Fragen zu JavaScript 6
J Mit Javascript gleichzeitig in 2 Frames Seiten öffnen Angular, React, JQuery - Fragen zu JavaScript 2
A Neues Fenster aus iframe öffnen mit Klick auf Button Angular, React, JQuery - Fragen zu JavaScript 6
F Ich habe ein Problem mit dem öffnen eines neuen Fensters Angular, React, JQuery - Fragen zu JavaScript 3
R Einige links in neuen fenster öffnen Angular, React, JQuery - Fragen zu JavaScript 2
S Drop Down Menü soll Links in Hauptfrane öffnen! Angular, React, JQuery - Fragen zu JavaScript 2
N Internetseiten mit Java öffnen Angular, React, JQuery - Fragen zu JavaScript 4
I viele links öffnen und nach erfolgreichem laden wieder beend Angular, React, JQuery - Fragen zu JavaScript 5
B link eines dhtml/java menüs im iframe öffnen . Angular, React, JQuery - Fragen zu JavaScript 3
L Javascript-Popups öffnen sich nicht Angular, React, JQuery - Fragen zu JavaScript 5
F Nach Schließen des Browsers eine neue Seite öffnen Angular, React, JQuery - Fragen zu JavaScript 2
R Java Fenster öffnen sich nicht im Browser! Angular, React, JQuery - Fragen zu JavaScript 3
C Flashfilm aus einer HTML-Seite im Fullscreen öffnen Angular, React, JQuery - Fragen zu JavaScript 2
S Ilayer über Klick öffnen ? Angular, React, JQuery - Fragen zu JavaScript 5
G seite öffnen mittels javascript Angular, React, JQuery - Fragen zu JavaScript 2
T Link per Tastendruck öffnen Angular, React, JQuery - Fragen zu JavaScript 3
J Bild-Link in neuer Seite öffnen, die beim Klicken schließt Angular, React, JQuery - Fragen zu JavaScript 4
G Drobdown auswahl in neuen Fenster öffnen. Angular, React, JQuery - Fragen zu JavaScript 3

Ähnliche Java Themen

Anzeige

Neue Themen


Oben