Как перейти на другую страницу onClick in реагировать

Question

Я новичок, чтобы реагировать, и я пытаюсь загрузить другую страницу, когда пользователь нажимает кнопку. Я использовал window.location, но ничего не происходит, когда я нажимаю кнопку. Как это исправить?

Это где я включил мой OnClick

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

Функция написана для OnClick

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

Answer 1

Вы должны ссылаться на метод, использующий this, в противном случае Реагировать не находит его.

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

Answer 2

Если вы действительно хотите создать одно приложение, я бы предложил использовать React Router. В противном случае вы могли бы просто использовать обычный Javascript:

Есть два основных способа сделать в зависимости от вашего желания вы хотите:

1. Стиль <a> в качестве кнопки
2. используйте устройство <button> и перенаправлять программно

Поскольку, согласно вашему вопросу, я полагаю, что вы не создаете одностраничное приложение и не используете что-то вдоль линий React router. И конкретно упоминается использование button Ниже приведен пример кода

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

Ошибки, которые я вижу по вашему сообщению

1. Функция, которая использует window.location не правильно называется в визуализации методом
2. Вы можете использовать window.location.assign() метод, который помогает загрузить новый документ
3. Я сомневаюсь, что страницы JSX отображаются непосредственно в браузере при попытке напрямую их называть

Надеется, что это поможет, если нет, и вы выяснить ответ, пожалуйста, поделитесь

Answer 3

Вы должны связать обработчик в конструкторе компоненты, в противном случае Реагировать не смогу найти свою функцию home ,

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