it-swarm.com.de

Wie gehe ich zu einer anderen Seite?

Ich bin neu zu reagieren und ich versuche, eine andere Seite zu laden, wenn der Benutzer auf eine Schaltfläche klickt. Ich habe window.location verwendet, aber nichts passiert, wenn ich auf die Schaltfläche klicke. Wie kann ich das beheben?

Hier habe ich meinen OnClick aufgenommen 

<div>
  <img className="menu_icons" src={myhome}/>
  <label className="menu_items" onClick={home}>Home</label>
</div>

Funktion für onClick geschrieben

function home(e) {
    e.preventDefault();
    window.location = 'my-app/src/Containers/HomePage.jsx';
}
6
CraZyDroiD

Wenn Sie wirklich eine einzelne App erstellen möchten, würde ich die Verwendung von React Router vorschlagen. Ansonsten könnten Sie einfach Javascript verwenden:

Es gibt zwei Hauptmethoden, je nach Wunsch, den Sie möchten:

  1. Gestalten Sie einen <a> als Schaltfläche
  2. Verwenden Sie einen <button> und leiten Sie programmgesteuert um

Ich gehe davon aus, dass Sie Ihrer Frage zufolge keine Einzelseiten-App erstellen und so etwas wie einen React-Router verwenden. Und die speziell erwähnte Verwendung von button Nachfolgend finden Sie einen Beispielcode 

var Component = React.createClass({
  getInitialState: function() { return {query: ''} },
  queryChange: function(evt) {
    this.setState({query: evt.target.value});
  },
  handleSearch: function() {
    window.location.assign('/search/'+this.state.query+'/some-action');
  },
  render: function() {
    return (
      <div className="component-wrapper">
        <input type="text" value={this.state.query} />
        <button onClick={this.handleSearch()} className="button">
          Search
        </button>
      </div>
    );
  }
});

Fehler sehe ich laut deinem Beitrag 

  1. Die Funktion, die window.location verwendet, wird in der Render-Methode nicht ordnungsgemäß aufgerufen
  2. Sie können die window.location.assign()-Methode verwenden, die beim Laden eines neuen Dokuments hilft 
  3. Ich bezweifle, dass JSX-Seiten direkt auf Browserebene gerendert werden, wenn Sie versuchen, sie direkt aufzurufen

Hoffe, das würde helfen, wenn nicht und Sie eine Antwort herausfinden, bitte teilen

9

Sie müssen den Handler im Konstruktor Ihrer Komponente binden, andernfalls kann React Ihre home-Funktion nicht finden.

constructor(props) {
  super(props);
  this.home = this.home.bind(this);
}
6
grizzthedj

Sie müssen die Methode mit this referenzieren, andernfalls findet React sie nicht.

<div>
  <img className="menu_icons" src={myhome}/>
  <label className="menu_items" onClick={this.home}>Home</label>
</div>
0
Tumen_t