反应，带有链接的按钮和 onClick答案

【问题标题】：React, button with link and onClick反应，带有链接的按钮和 onClick
【发布时间】：2021-03-17 02:37:32
【问题描述】：

我有这个组件：

      <ButtonSendMoney
        handleSendMoney={handleSendMoney}
        link={link}
      />

这个渲染了这个：

  <Link to={link}>
    <button
      onClick={handleSendMoney}
    >
     Go
    </button>
  </Link>

所以，我的问题是我的handleSendMoney 处理程序正在设置link，换句话说：

当我单击按钮时，会触发一些操作，这些操作会修改 link 的值，但使用该代码，它将导航到修改前的 link 值。那么我如何“等待”并等待处理程序完成，然后将正确的链接道具传递给组件？

编辑：

我可以编辑组件，删除它，然后在上面提到的处理程序中重定向，但是如何？

【问题讨论】：

link 是如何被修改的？是父母的状态吗？
是的，它是一个在 useEffect 中修改的本地状态，它与 redux 有依赖关系，所以提到的处理程序会触发一个更新该 redux 值的操作，然后在本地设置链接

标签： reactjs

【解决方案1】：

我认为在 Link 中渲染按钮不是一个好主意，因为您要触发两个相关事件。

如果你使用 react-router-dom，你应该在你的 handleSendMoney 函数中做一些这样的思考：

import React from 'react';
import { useHistory } from 'react-router-dom';

export default Exemple(){

  const history = useHistory()
  handleSendMoney(){
      //modifies the value of link
      history.push(link)
  }

  return(
      <ButtonSendMoney
        handleSendMoney={handleSendMoney}
        link={link}
      />
  );

}

你的 ButtonSendMoney 应该是这样的：

 <button onClick={handleSendMoney}>
   Go
 </button>

【讨论】：