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

IT技术 reactjs react-router
2021-04-21 04:58:10

在路由器做出react，我必须要和的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 页面时将显示该变量。

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

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

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

2个回答

一种可能的方法是，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 动态导航

使用这个：<Route exact path="/" render={(props) => <Home {...props} names={names} selectName={this.selectName} />} />，它会起作用，注意{...props}部分:)
2021-05-23 04:58:10
随着新的变化，它显示错误'无法读取未定义的属性'推送'。如何将历史作为道具传递。我在 <Route> 中使用渲染，如下所示。<路由精确路径="/" render={() => <Home names={names} selectName={this.selectName} />} />
2021-05-27 04:58:10
包装你的组件通过withRouter，它将提供访问历史，就像这样：export default withRouter(ComponentName)。检查文件
2021-05-30 04:58:10
感谢您的解决方案。它的工作正常。由于 export 语句在 withRouter 之外，正如所讨论的，我将 Router 移动到 index.js 文件并且它起作用了。完整的解决方案在这里更新
2021-06-09 04:58:10
检查此答案以获取更多详细信息{...props}：React react-router-dom pass props to component
2021-06-10 04:58:10

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

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

现在，当您链接到关于页面时，您可以这样做：

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

现在，在你的 AboutPage 组件中，你可以访问 name param 作为this.props.params.name. 您可以在此处查看更多示例。

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

这种方法就是解决上述目的。唯一需要更改的是在 About 函数中使用 {match}。const About = ({ match }) => ( <h2>About {match.params.id}</h2>这个方法有一个限制，如果我们需要在关于页面中存储大量数据并显示大量数据，在URL中传递所有数据是很麻烦的。
2021-06-06 04:58:10
其它你可能感兴趣的问题
上一篇未找到带有 React-router bundle.js 的 Webpack 下一篇react-hook-form 的 DefaultValues 未设置 React JS 中输入字段的值