React verwendet Routing, um zur Anmeldeoberfläche umzuleiten

<Text>
 <div id="meinInhalt"></div>
 <script src="./dist/bundle.js"></script>
</body>

React von „react“ importieren
importiere {Formular,Eingabe,Symbol,Schaltfläche} von 'antd'
// importiere {render} von „react-dom“
// importiere Axios von „Axios“

importiere '../node_modules/antd/dist/antd.css' //Wenn Sie diese Datei nicht importieren, wird der Antd-Stil nicht angezeigt importiere './style/login.css';

Klasse LoginFrom erweitert React.Component{
 Konstruktor(){
 super()
 }

 handleSubmit = (e) => {
 //Vor dem Absenden prüfen, ob das Eingabefeld Fehler enthält e.preventDefault();
 
 **let history = diese.props.history;**
 this.props.form.validateFields((Fehler,Werte)=>{
  wenn (!Fehler) {
  console.log('Empfangene Werte der Form: ', Werte);
  **history.push('/Ansicht');**
  }
 })
 }

 machen(){
 //Die von Form.create gepackte Komponente verfügt über eine eigene this.props.form-Eigenschaft, die eine Reihe von APIs bereitstellt, darunter die folgenden 4 //getFieldDecorator wird für die bidirektionale Bindung mit dem Formular verwendet //isFieldTouched bestimmt, ob ein Eingabesteuerelement den Werterfassungszeitpunkt von getFieldDecorator options.trigger erfahren hat (der Zeitpunkt der Werterfassung des untergeordneten Knotens, der Standardwert ist onChange)
 //getFieldError ruft den Fehler eines Eingabesteuerelements ab
 //Ermittelt den Fehler einer Gruppe von Eingabesteuerelementen. Wenn keine Parameter übergeben werden, wird der Fehler aller Komponenten ermittelt.
 const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
 const userNameError = isFieldTouched('Benutzername') && getFieldError('Benutzername');
 const passWordError = isFieldTouched('Passwort') && getFieldError('Passwort');
 zurückkehren (
  <div Klassenname="Anmelden">
  <div className="Anmeldeformular">
   <div Klassenname="Login-Logo">
   <div className="Anmeldename">MSPA</div>
   </div>
   <Formular beiSubmit={this.handleSubmit}>
   {/* Setze ein mit getFieldDecorator dekoriertes untergeordnetes Element in ein FromItem */}
   <Formular.Element
    validateStatus={userNameError ? 'error' : ''} //validateStatus ist der Validierungsstatus. Wenn nicht gesetzt, wird er automatisch entsprechend den Validierungsregeln generiert. Optional: 'success' 'warning' 'error' 'validating'
   >
   {
    getFieldDecorator('Benutzername',{
    Regeln: [{erforderlich: wahr, Nachricht: "Bitte geben Sie Ihren Benutzernamen ein!"}]
    })(
    <Eingabepräfix={<Symboltyp="Benutzer" Stil={{ Farbe: 'rgba(0,0,0,.25)' }}/>}
     Platzhalter="Benutzername"
    />
    )
   }
   </Form.Item>
   <Formular.Element
    validateStatus={passWordError ? "Fehler" : ''}
   >
   {
    getFieldDecorator('Passwort',{
    Regeln: [{erforderlich: wahr, Nachricht: "Bitte geben Sie Ihr Passwort ein!"}]
    })(
    <Eingabepräfix={<Symboltyp="Schloss" Stil={{ Farbe: 'rgba(0,0,0,.25)' }}/>}
     Platzhalter="Passwort"
    />
    )
   }
   </Form.Item>
   <Formular.Element>
    <Schaltfläche
    Typ="primär"
    htmlType="Senden"
    deaktiviert={hasErrors(getFieldsError)}
    >Anmelden</Button>
   </Form.Item>
   </Form>
  </div>
  </div>
 )
 }
}
let LoginForm = Form.create()(LoginForm);
Standard-Anmeldeformular exportieren;

React von „react“ importieren
importiere {HashRouter als Router, Route, Switch} aus ‚react-router-dom‘
importiere { createBrowserHistory} aus "history";

importiere MyView aus '../components/myView.js'
LoginModule aus '../login.js' importieren
importiere MeinBild aus '../components/myPicture'
importiere MyDocument aus '../components/myDocument.js'

exportiere Standardklasse MyRoute erweitert React.Component{
 machen(){
 zurückkehren(
  <Router-Verlauf={createBrowserHistory()}>
  <Schalter>
   <Route exakter Pfad="/" component={LoginModule}/>
   <MyView-Pfad='/View'-Komponente={MyDocument}>
   <Route path="/View/abc" component={MeinDokument} />
   <Route path="/View/myPicture" component={MyPicture} /> 
   </MeineAnsicht> 
  </Schalter>
  </Router>
 )
 } 
}

importiere MyRoute aus './router/index.js'
importiere {render} von 'react-dom'
React von „react“ importieren
machen(
 <MeineRoute />, 
 document.getElementById('meinInhalt')
);