reactjs - 如何在链接: ReactJS?上使用onClick事件

Question

在 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 属性导航至about路线
• onClick 为状态变量 selectedName 赋值，该值将在导航到“关于”页面时显示。

当我在单击时调用内部函数时，它会导航到新页面，并且在一段时间后状态会更新，导致显示以前的名称，直到状态用新名称更新。

有没有办法让 onClick 函数中的代码执行后才导航到新路线。

您可以在[此处]获取完整代码。( https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js )

Answer 1

一种可能的方法是，不使用 Link，而是使用 history.push 动态更改路由。要实现此目的，请删除 Link 组件并在 li 上定义 onClick 事件。现在首先执行 onClick 函数中的所有任务，最后使用 history.push 更改在其他页面上导航的路线。

在您的情况下，更改 setState 回调函数内的路由器，以确保它仅在状态更改后才会发生。

这样写:

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

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

检查此答案:

When to use setState callback

How to navigate dynamically using react router dom