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

【问题标题】：How to use onClick event on Link: ReactJS?如何在 Link: ReactJS 上使用 onClick 事件？
【发布时间】：2018-06-25 22:59:27
【问题描述】：

在 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 赋值，当导航到 About 页面时将显示该值。

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

有没有一种方法，只有在 onClick 函数中的代码执行后才会导航到新路由。

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

【问题讨论】：

标签： reactjs react-router

【解决方案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

【讨论】：

随着新的变化，它显示错误'无法读取未定义的属性'push''。如何将历史作为道具传递。我在中使用渲染，如下所示。 } />
使用这个：<Route exact path="/" render={(props) => <Home {...props} names={names} selectName={this.selectName} />} />，它会起作用，注意{...props} 部分:)
查看此答案以获取有关{...props}的更多详细信息：React react-router-dom pass props to component
用withRouter包装你的组件，它将提供对历史的访问，如下所示：export default withRouter(ComponentName)。 Check DOC
感谢您的解决方案。它工作正常。由于 export 语句在 withRouter 之外，如前所述，我将 Router 移动到 index.js 文件中并且它起作用了。完整解决方案更新here

【解决方案2】：

或者，我建议使用 URL 参数来捕获关于页面的人的姓名。因此，不是 url 是 /about 并且名称在幕后，而是 /about/tom 或 /about/pushkal。你这样做的方法是在你的 index.js 中定义 URL 路由器中的参数：

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

现在，当您链接到 about 页面时，您会这样做：

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

现在，在 AboutPage 组件中，您可以访问名称参数作为 this.props.params.name 中的道具。您可以查看更多示例here。

此方法与您当前的方法有点不同，但我怀疑它会导致以后的设计更容易

【讨论】：

这种方法就是解决上述目的。唯一需要的改变是在 About 函数中使用 {match}。 const About = ({ match }) => ( <h2>About {match.params.id}</h2> 如果我们需要存储大量数据并在 About 页面中显示大量数据，则此方法存在一个限制，在 URL 中传递所有数据很麻烦。