如何在Link上使用onClick事件:ReactJS？

Question

在路由器做出反应,我必须要和的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});
}

• 到属性导航到约路线
• onClick将值赋给状态变量selectedName,该值将在导航到About页面时显示.

当我给出超时内部函数调用点击时,它导航到新页面并且在某个时间状态得到更新后导致显示以前的名称,直到状态用新名称更新.

有没有办法只有在onClick函数中的代码执行后才能导航到新路由.

您可以[这里]获取整个代码.(https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js)

Answer 1

一种可能的方法是,Link使用history.push动态更改路径,而不是使用.要实现这一点,请删除Link组件并定义onClick事件li.现在首先执行onClick函数内部的所有任务,最后使用history.push更改路径意味着在其他页面上导航.

在您的情况下,更改setState回调函数内的路由器,以确保它只在状态更改后发生.

写这样:

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

selectName = (name) => {
    this.setState({ selectedName:name }, () => {
        this.props.history.push('about');
    });
}

检查以下答案:

何时使用setState回调

如何使用react router dom动态导航