Как использовать событие onClick по ссылке: ReactJS?

в маршрутизаторе React у меня есть to и onClick атрибуты, как показано ниже

<li key={i}><Link to="/about" onClick={() => props.selectName(name)}>{name}</Link></li>

state = {
    selectedName: ''
};

selectName = (name) => {
   setTimeout(function(){this.setState({selectedName:name});}.bind(this),1000);
   // this.setState({selectedName: name});
}
  • to атрибут переходит к о маршрут
  • onClick присваивает значение переменной состояния selectedName, которая будет отображаться при переходе на страницу About.

когда я даю тайм-аут insided функция называется при щелчке его переход на новую страницу и через некоторое время состояние обновляется, что приводит к отображению предыдущего имени, пока состояние не будет обновлено новым именем.

есть ли способ, которым он будет перемещаться по новому маршруту только после выполнения кода в функции onClick.

вы можете получить весь код [here].(https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js)

6
react-router reactjs

3 ответов

один из возможных способов-вместо использования Link используйте history.push для динамического изменения маршрута. Для достижения этого удалите Link компонент и определения onClick событие on li. Теперь сначала выполните все задачи внутри

6

кроме того, я бы рекомендовал использовать параметры URL, чтобы захватить имя человека, о котором идет речь. Таким образом, вместо url-адреса /about и имени, находящегося за кулисами, это будет /about/tom или /about/pushkal. Способ сделать это-определить параметры в маршрутизаторе URL как таковые в вашем индексе.js:

<Route path="/about/:name" component={AboutPage}>

Теперь, когда вы ссылаетесь на страницу about, вы сделаете это как таковое:

<Link to={"/about/" + name}>{name}</Link>

Теперь, в вашем компоненте AboutPage, вы может получить доступ к имени param в качестве опоры в this.props.params.name. Вы можете посмотреть больше примеров здесь.

этот метод немного отличается от вашего текущего подхода, но я подозреваю, что это приведет к более легкому дизайну позже

1

просто оберните содержимое ссылки внутри div и дайте слушателю onClick этот div, и он будет работать нормально. е.г: 

<Link to="/about">
 <div onClick={() => {yourfunction()}>About</div>
</Link>
0