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

有没有办法将ref {useRef}绑定到Submit函数/变量

1 个答案: