Jak przejść do innej strony onClick in react

Question

Jestem nowy, aby zareagować i próbuję załadować kolejną stronę, gdy użytkownik kliknie przycisk. Użyłem window.location, ale nic się nie dzieje po kliknięciu przycisku. Jak to naprawić?

To gdzie mam włączone mój onClick

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

Funkcja napisany dla onClick

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

Answer 1

Trzeba odwołać się do metody przy użyciu this, inaczej reagują nie go znaleźć.

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

Answer 2

Jeśli naprawdę chcesz zbudować jedną aplikację, proponuję użyć React Router. W przeciwnym razie można po prostu używać zwykłego javascript:

Istnieją dwa główne sposoby działania w zależności od chęci chcesz:

1. Style <a> jako przycisk
2. Skorzystaj z <button> i przekierować programowo

Ponieważ zgodnie z twoim pytaniem zakładam, że nie budujesz aplikacji na jedną stronę i używasz czegoś podobnego do routera React. A konkretnie wymienione wykorzystanie button Poniżej znajduje się przykładowy kod

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> 
    ); 
    } 
}); 

błędy widzę według Twojego postu

1. Funkcja wykorzystująca window.location nie został prawidłowo wezwany renderowanie metoda
2. można użyć window.location.assign() metoda, która pomaga załadować nowy dokument
3. Wątpię, czy strony JSX są renderowane bezpośrednio na poziomie przeglądarki, gdy próbujesz połączyć się z nimi bezpośrednio

Nadzieja to pomoże, jeśli nie i dowiedzieć się odpowiedź proszę podzielić

Answer 3

Trzeba powiązać obsługi w konstruktorze komponentu, React inaczej nie będzie w stanie znaleźć swoją funkcję home .

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