在 React 中的 history.push() 中传递按钮 ID答案

【问题标题】：Passing button id in history.push() in React在 React 中的 history.push() 中传递按钮 ID
【发布时间】：2021-06-06 15:33:57
【问题描述】：

我有两个按钮，如下图所示。我正在使用此代码使用history.push 将用户导航到注册页面。我想将某种数据传递给Registration 页面，例如基于按钮单击的用户是“志愿者”还是“正当理由”。我知道它相对简单，但我无法弄清楚。谢谢。

let history = useHistory();
  const handleClickRegistration = () => {
    history.push({
      pathname: '/Registration',
    });
  };

这是我调用函数的地方

          type="submit"
          variant="contained"
          id="volunteer"
          className={classes.button}
          style={{margin: 8}}
          onClick={handleClickRegistration}
        >
      Register as a Volunteer
    </Button>

【问题讨论】：

标签： react-router browser-history

【解决方案1】：

如果你在两个按钮上使用相同的功能，那么就使用它

<Button onClick={()=> handleClickRegistration("volunteer")} >Register as a 
Volunteer</Button>

<Button onClick={()=> handleClickRegistration("good_cause")} >Register as a 
Good Cause</Button>

并在handleClickRegistration 函数中通过history.push 方法发送一个状态

const handleClickRegistration = (userType) => {
history.push({
  pathname: '/Registration',
  state: { userType: userType }
});
};

你可以在Registration rotue中获得

【讨论】：