reagieren Schaltfläche onClick-redirect-Seite

Arbeite ich auf die web-Anwendung mit Reagieren und bootstrap. Wenn es um die anwenden-Schaltfläche onClick, dauert es mir schwer Zeit zu lassen, meine Seite wird eine Umleitung zu einem anderen. wenn nach einem "href" kann ich nicht gehen auf der anderen Seite.

Also würden Sie bitte sagen Sie mir, gibt es keine Notwendigkeit für die Verwendung reagieren-navigation oder andere Navigation in der Seite mit Button onClick ? 

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';

class LoginLayout extends Component {

  render() {
    return (
 <div className="app flex-row align-items-center">
        <Container>
     ...
                    <Row>
                      <Col xs="6">                      
                        <Button color="primary" className="px-4">
                            Login
                         </Button>
                      </Col>
                      <Col xs="6" className="text-right">
                        <Button color="link" className="px-0">Forgot password?</Button>
                      </Col>
                    </Row>
               ...
        </Container>
      </div>
    );
  }
}
InformationsquelleAutor Raju yourPepe | 2018-06-01
  1. 32

    verwenden Sie Reagieren Router v4:

    import { withRouter } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';

class LoginLayout extends Component {
  constuctor() {
    this.routeChange = this.routeChange.bind(this);
  }

  routeChange() {
    let path = `newPath`;
    this.props.history.push(path);
  }

  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={this.routeChange}
                  >
                  Login
                </Button>
            </Col>
            <Col xs="6" className="text-right">
              <Button color="link" className="px-0">Forgot password?</Button>
            </Col>
          </Row>
          ...
        </Container>
      </div>
    );
  }
}

export default withRouter(LoginLayout);
    InformationsquelleAutor aravind_reddy
  2. 1

    Einem einfachen Klick-handler auf den button und Einstellung window.location.hash wird den trick tun, vorausgesetzt, dass Ihr Ziel auch innerhalb der app.

    Können Sie hören, die hashchange Veranstaltung auf window, analysiert die URL, die Sie bekommen, rufen Sie this.setState(), und Sie haben Ihre eigenen einfachen router, keine Bibliothek benötigt.

    class LoginLayout extends Component {
    constuctor() {
      this.handlePageChange = this.handlePageChange.bind(this);
      this.handleRouteChange = this.handleRouteChange.bind(this);
      this.state = { page_number: 0 }
    }

  handlePageChange() {
    window.location.hash = "#/my/target/url";
  }

  handleRouteChange(event) {
    const destination = event.newURL;
    //check the URL string, or whatever other condition, to determine
    //how to set internal state.
    if (some_condition) {
      this.setState({ page_number: 1 });
    }
  }

  componentDidMount() {
    window.addEventListener('hashchange', this.handleRouteChange, false);
  }

  render() {
    //@TODO: check this.state.page_number and render the correct page.
    return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
                <Row>
                  <Col xs="6">                      
                    <Button 
                       color="primary"
                       className="px-4"
                       onClick={this.handlePageChange}
                    >
                        Login
                     </Button>
                  </Col>
                  <Col xs="6" className="text-right">
                    <Button color="link" className="px-0">Forgot password </Button>
                  </Col>
                </Row>
           ...
        </Container>
      </div>
    );
  }
}
    • mit Fenster.Lage ist nicht empfehlenswert für jedermann, das schaut, um beizubehalten, jede form der SPA (single page application). Sie haben sich verändert die browser-url und wischte sich aus jedem Staat, etc.
    • Wenn Sie sagen, "ausgelöscht jedem Staat", was Sie im Sinn haben, konkret? Ich bin mit location.hash, die nicht zu einem Neuladen der Seite.
    InformationsquelleAutor ouni
Schreibe einen Kommentar