是否有方法将ref｛useRef｝绑定到提交函数/变量

Question

我是新手，正在尝试构建一个表单。我希望表单提交后页面重定向到主页。有没有办法将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)}>

Answer 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>
);
}