有没有办法将 ref {useRef} 绑定到提交函数/变量答案

【问题标题】：Is there a way to bind the ref {useRef} to the submit function/variable有没有办法将 ref {useRef} 绑定到提交函数/变量
【发布时间】：2020-10-13 20:41:25
【问题描述】：

我是新手，我正在尝试构建一个表单。提交表单后，我希望页面重定向到主页。有没有办法设置 useRef 来观看内置的提交功能？我目前没有编译器错误，但页面不会重定向。

当前代码：

import React, {useRef} from 'react'
import {useForm} from 'react-hook-form'
import Button from '@material-ui/core/Button'
import {Redirect} from 'react-router-dom'
export default function Form() {
    const submit = useRef(false)
    const {register, handleSubmit} = useForm();
    const redir = (data) => {
        console.log(submit.current)
        console.log(data)
            return <Redirect to='/' />
    }
    return (
        <div>
            <form className="form" ref={submit} onSubmit={handleSubmit(redir)}>

【问题讨论】：

看起来你没有过去完整的代码

标签： javascript reactjs react-router

【解决方案1】：

您正在从处理函数返回Redirect，但您需要渲染它。相反，您可以使用history.push('/') 来做您想做的事情。

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

//...

export default function Form() {
  const submit = useRef(false);
  const history = useHistory();
  const {register, handleSubmit} = useForm();
  const redir = (data) => {
    console.log(submit.current);
    console.log(data);
    history.push('/');
  }
  return (
    <div>
      <form className="form" ref={submit} onSubmit={handleSubmit(redir)}>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

【讨论】：