反应挂钩表单和材料用户界面：成功提交表单后，reset() 不起作用

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 />找到有关集成 UI 库的更多信息。

一件重要的事情是传递defaultValues到useForm，因为在使用reset外部受控组件（文档）时这是必需的。

您需要将 defaultValues 传递给 useForm 才能重置控制器组件的值。

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