Javascript 在html按钮中将react路由器链接包装为提交选项

我正在尝试将react路由器链接包装在提交按钮中。我知道有这个选项：但它不能处理提交本身

我有这样的想法：

<button type='submit'>
  <Link to={{pathname : "/user/signup", search:"?page=sectionTwo"}} >
    CONTINUE
  </Link>  
</button>

继续

---

表单本身由Formik处理，如果有帮助的话。

创建onSubmit处理程序并在内部创建到另一个页面的转换：

onSubmit = (value) => {
  const { history } = props;
  history.push('your link');
}

---

并且不必使用它链接组件

在Submit处理程序中创建并在内部创建到另一个页面的转换：

onSubmit = (value) => {
  const { history } = props;
  history.push('your link');
}

---

并且不必使用它链接组件

我假设您已经

<form onSubmit={someFunction}> 
// Your submit button somewhere here
</form> 

//你的提交按钮在这里的某个地方

当用户单击提交按钮时，您希望将用户重定向到其他页面。我会这样做

constructor(props) {
    super(props);
    this.state = { redirect: false }
}

handleSubmit() {
    // do some check before setting redirect to true
    this.setState({ redirect: true });
}

render() {
    // you could reset the this.state.redirect to false here before redirecting a user
    if (this.state.redirect) return <Redirect to='some url' />;
    else return (
         <div>
             <form onSubmit={this.handleSubmit.bind(this)}>
                 <button type='submit'> Continue </button>
             </form>
         </div>
    )
}

构造函数（道具）{
超级（道具）；
this.state={redirect:false}
}
handleSubmit（）{
//在将重定向设置为true之前进行一些检查
this.setState（{redirect:true}）；
}
render（）{
//在重定向用户之前，可以在此处将this.state.redirect重置为false
if（this.state.redirect）返回；
否则返回(
继续
)
}

---

想法是当用户单击submit时，它更新状态，重新呈现组件并查看重定向是否为真，如果为真，它将用户重定向到页面。我认为包装不应该作为按钮工作的链接很尴尬-IMO。

我想你已经这样做了

<form onSubmit={someFunction}> 
// Your submit button somewhere here
</form> 

//你的提交按钮在这里的某个地方

当用户单击提交按钮时，您希望将用户重定向到其他页面。我会这样做

constructor(props) {
    super(props);
    this.state = { redirect: false }
}

handleSubmit() {
    // do some check before setting redirect to true
    this.setState({ redirect: true });
}

render() {
    // you could reset the this.state.redirect to false here before redirecting a user
    if (this.state.redirect) return <Redirect to='some url' />;
    else return (
         <div>
             <form onSubmit={this.handleSubmit.bind(this)}>
                 <button type='submit'> Continue </button>
             </form>
         </div>
    )
}

构造函数（道具）{
超级（道具）；
this.state={redirect:false}
}
handleSubmit（）{
//在将重定向设置为true之前进行一些检查
this.setState（{redirect:true}）；
}
render（）{
//在重定向用户之前，可以在此处将this.state.redirect重置为false
if（this.state.redirect）返回；
否则返回(
继续
)
}

---

想法是当用户单击submit时，它更新状态，重新呈现组件并查看重定向是否为真，如果为真，它将用户重定向到页面。我认为包装不应该作为按钮工作的链接很尴尬-IMO。

为什么要这样做？你想达到什么目标？将链接嵌套在按钮中会带来麻烦。总体目标是在用户完成表单并单击“继续”时，在具有动画转换的单独页面上创建三个子页面。这将更改url，以便用户可以使用“返回”浏览器按钮返回到上一个表单，并且写入其中的信息不会丢失。我用formik（）和router（）将孩子们包装在

中。父节点有一个呈现子节点的
BrowserRouter
，我设法将子节点的值传递给url（
location.state
），但我无法提取它，因为它在url更新时不会重新呈现。叹息：）对不起。。。我有点不知所措你为什么要这么做？你想达到什么目标？将链接嵌套在按钮中会带来麻烦。总体目标是在用户完成表单并单击“继续”时，在具有动画转换的单独页面上创建三个子页面。这将更改url，以便用户可以使用“返回”浏览器按钮返回到上一个表单，并且写入其中的信息不会丢失。我用formik（）和router（）将孩子们包装在
中。父节点有一个呈现子节点的
BrowserRouter
，我设法将子节点的值传递给url（
location.state
），但我无法提取它，因为它在url更新时不会重新呈现。叹息：）对不起。。。我有点不知所措确保用Router
HOC包装组件
，或者组件应该是
组件的直接子组件确保用Router
HOC包装组件
，或者组件应该是
组件的直接子组件是的，我同意按钮内的链接，我只是有一个非常奇怪的工作环境，我不知道该怎么办。我的孩子们被包裹在两个HOC中，需要在彼此之间共享表单数据，同时留下浏览器历史记录，并在转换时设置动画。这是一个有点痛呵呵，我同意按钮内的链接，我只是有一个非常奇怪的设置工作，我不知道该怎么办。我的孩子们被包裹在两个HOC中，需要在彼此之间共享表单数据，同时留下浏览器历史记录，并在转换时设置动画。有点疼呵呵