反应挂钩表单和 material ui：成功提交表单后重置（）不起作用

Question

我正在尝试使用 react hook forms 提交表单。提交后我想清除所有字段。我读过有关使用 reset() 的内容。但它不起作用

import React, { Fragment } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import "react-toastify/dist/ReactToastify.css";

import {
  Paper,
  Box,
  Grid,
  TextField,
  Typography,
  Button,
} from "@material-ui/core";

export default function ResetPassword() {
  const validationSchema = Yup.object().shape({
    old_password: Yup.string().required("Password is required"),
    new_password1: Yup.string().required("Password is required"),
    new_password2: Yup.string().required("Password is required"),
  });

  const { register, handleSubmit, reset } = useForm({
    resolver: yupResolver(validationSchema),
  });

  const onSubmit = (data) => {
    console.log(data);
    reset();
  };

  return (
    <Fragment>
      <Paper variant="outlined">
        <Box px={3} py={2}>
          <Typography variant="h6" align="center" margin="dense">
            Change Password
          </Typography>
          <Grid container spacing={1}>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="Current Password"
                type="password"
                {...register("old_password")}
              />
            </Grid>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="New Password"
                type="password"
                {...register("new_password1")}
              />
            </Grid>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="Confirm New Password"
                type="password"
                {...register("new_password2")}
              />
            </Grid>
          </Grid>

          <Box mt={3}>
            <Button
              variant="contained"
              color="primary"
              onClick={handleSubmit(onSubmit)}
            >
              Change Password
            </Button>
          </Box>
        </Box>
      </Paper>
    </Fragment>
  );
}

提交后如何重置字段

Answer 1

你必须在这里使用 RHF 的 <Controller /> 组件，因为 register 不能与 MUI 的 <Textfield /> 一起使用，因为它是一个外部控制组件。您可以找到 here 有关集成 UI 库的更多信息。

一件重要的事情是将 defaultValues 传递给 useForm，因为在将 reset 用于外部控制组件 (Docs) 时这是必需的。

You will need to pass defaultValues to useForm in order to reset the Controller components' value.

export default function ResetPassword() {
  const validationSchema = Yup.object().shape({
    old_password: Yup.string().required("Password is required"),
    new_password1: Yup.string().required("Password is required"),
    new_password2: Yup.string().required("Password is required")
  });

  const { control, handleSubmit, reset } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues: {
      old_password: "",
      new_password1: "",
      new_password2: ""
    }
  });

  const onSubmit = (data) => {
    console.log(data);
    reset();
  };

  return (
    <Fragment>
      <Paper variant="outlined">
        <Box px={3} py={2}>
          <Typography variant="h6" align="center" margin="dense">
            Change Password
          </Typography>
          <Grid container spacing={1}>
            <Grid item xs={12} sm={12}>
              <Controller
                name="old_password"
                control={control}
                render={({ field: { ref, ...field } }) => (
                  <TextField
                    {...field}
                    inputRef={ref}
                    fullWidth
                    required
                    label="Current Password"
                    type="password"
                  />
                )}
              />
            </Grid>
            <Grid item xs={12} sm={12}>
              <Controller
                name="new_password1"
                control={control}
                render={({ field: { ref, ...field } }) => (
                  <TextField
                    {...field}
                    inputRef={ref}
                    fullWidth
                    required
                    label="New Password"
                    type="password"
                  />
                )}
              />
            </Grid>
            <Grid item xs={12} sm={12}>
              <Controller
                name="new_password2"
                control={control}
                render={({ field: { ref, ...field } }) => (
                  <TextField
                    {...field}
                    inputRef={ref}
                    fullWidth
                    required
                    label="Confirm New Password"
                    type="password"
                  />
                )}
              />
            </Grid>
          </Grid>

          <Box mt={3}>
            <Button
              variant="contained"
              color="primary"
              onClick={handleSubmit(onSubmit)}
            >
              Change Password
            </Button>
          </Box>
        </Box>
      </Paper>
    </Fragment>
  );
}

反应挂钩表单和 material ui：成功提交表单后重置（）不起作用

react hook forms and material ui: reset() not working after successfull form submit

material-ui

react-hook-form