javascript - React - 我的表单正在提交空数据，因为声明了“e”和“data”但从未使用过？

Question

我正在尝试使用react-hook-form实现一个表单。我无法实际连接数据和事件正常工作。正如文档所述，我正在使用handleSubmitreact-hook-form 库中的函数，并将我的自定义 Axios 帖子作为onSubmit参数： onSubmit={handleSubmit(onSubmit)

根据我的 Vscode，数据和事件没有正确注册const onSubmit = (data, e) => {}。

提交表单后，Web 控制台会记录一个空表单： {email: "", password: ""}

我的代码做错了什么？请注意，为简洁起见，我删除了下面的密码文本字段。

export default function SignIn()
{
    const { register, control, errors: fieldsErrors, handleSubmit } = useForm()
    const history = useHistory();
    const initialFormData = Object.freeze({
        email: '',
        password: '',
    });

    const [formData, updateFormData] = useState(initialFormData);

    const handleChange = (e) => {
        updateFormData({
            ...formData,
        });
    };

    const dispatch = useDispatch();
    
    const onSubmit = (data, e) => {
            console.log(formData);
        
            axiosInstance
                .post(`auth/token/`, {
                    grant_type: 'password',
                    username: formData.email,
                    password: formData.password,
                })
                .then((res) => {
                    console.log(res);
                    localStorage.setItem('access_token', res.data.access_token);
                    localStorage.setItem('refresh_token', res.data.refresh_token);
                    history.push('/');
                    window.location.reload();
                    dispatch(login({
                        name: formData.email,
                        password: formData.password,
                        loggedIn: true,
                    }))
                })
        
        };

    const classes = useStyles();

    return (
        <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Typography component="h1" variant="h5">
                    Sign in
                </Typography>
                <form className={classes.form} noValidate onSubmit={handleSubmit(onSubmit)}>
                    <FormControl fullWidth variant="outlined">
                        <Controller
                            name="email"
                            as={
                                <TextField
                                    variant="outlined"
                                    margin="normal"
                                    inputRef={register}
                                    required
                                    fullWidth
                                    id="email"
                                    label="Email Address"
                                    name="email"
                                    autoComplete="email"
                                    autoFocus
                                    onChange={handleChange}
                                    helperText={fieldsErrors.email ? fieldsErrors.email.message : null}
                                    error={fieldsErrors.email}
                                />
                            }
                            control={control}
                            defaultValue=""
                            rules={{
                                required: 'Required',
                                pattern: {
                                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                                message: 'invalid email address'
                                }
                            }}
                        />  
                    </FormControl>

如何正确链接所有内容并让我的输入数据和事件与 onSubmit={handleSubmit(onSubmit)我的表单内部进行通信？

感谢您的帮助！

编辑：

export default function SignIn()
{
    const { register, control, errors: fieldsErrors, handleSubmit } = useForm()
    const history = useHistory();
    const initialFormData = Object.freeze({
        email: '',
        password: '',
    });

    const [formData, updateFormData] = useState(initialFormData);

    const handleChange = (e) => {
        updateFormData({
          ...formData,
          ...e
        });
      };

    const dispatch = useDispatch();
    
    const onSubmit = (data, e) => {
            console.log(formData);
        
            axiosInstance
                .post(`auth/token/`, {
                    grant_type: 'password',
                    username: formData.email,
                    password: formData.password,
                })
                .then((res) => {
                    console.log(res);
                    localStorage.setItem('access_token', res.data.access_token);
                    localStorage.setItem('refresh_token', res.data.refresh_token);
                    history.push('/');
                    window.location.reload();
                    dispatch(login({
                        name: formData.email,
                        password: formData.password,
                        loggedIn: true,
                    }))
                })
        
        };


    return (
        <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Typography component="h1" variant="h5">
                    Sign in
                </Typography>
                <form className={classes.form} noValidate onSubmit={handleSubmit(onSubmit)}>
                    <FormControl fullWidth variant="outlined">
                        <Controller
                            name="email"
                            as={
                                <TextField
                                    variant="outlined"
                                    margin="normal"
                                    inputRef={register}
                                    required
                                    fullWidth
                                    id="email"
                                    label="Email Address"
                                    name="email"
                                    autoComplete="email"
                                    autoFocus
                                    onChange={
                                        (evt) => {
                                          let key = evt.currentTarget.name;
                                          let value = evt.currentTarget.value;
                                          handleChange({[key]: value});
                                        }
                                      }
                                    helperText={fieldsErrors.email ? fieldsErrors.email.message : null}
                                    error={fieldsErrors.email}
                                />
                            }
                            control={control}
                            defaultValue=""
                            rules={{
                                required: 'Required',
                                pattern: {
                                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                                message: 'invalid email address'
                                }
                            }}
                        />  
                    </FormControl>
                    <TextField
                        variant="outlined"
                        margin="normal"
                        inputRef={register}
                        required
                        fullWidth
                        name="password"
                        label="Password"
                        type="password"
                        id="password"
                        autoComplete="current-password"
                        onChange={
                            (evt) => {
                              let key = evt.currentTarget.name;
                              let value = evt.currentTarget.value;
                              handleChange({[key]: value});
                            }
                          }
                    />

标签： javascriptreactjsmaterial-uireact-hook-form

Answer 1

为什么不在函数上使用data参数onSubmit？

const onSubmit = (data, e) => {
        console.log(data);
    
        axiosInstance
            .post(`auth/token/`, {
                grant_type: 'password',
                username: data.email,
                password: data.password,
            })
            .then((res) => {
                console.log(res);
                localStorage.setItem('access_token', res.data.access_token);
                localStorage.setItem('refresh_token', res.data.refresh_token);
                history.push('/');
                window.location.reload();
                dispatch(login({
                    name: data.email,
                    password: data.password,
                    loggedIn: true,
                }))
            })
    
    };

在里面使用这个Controller组件form

  <Controller
    as={
      <TextField
        variant="outlined"
        margin="normal"
        fullWidth
        label="Email Address"
        autoComplete="email"
        autoFocus
        error={Boolean(fieldsErrors.email)}
      />
    }
    name="email"
    control={control}
    rules={{
      required: 'Required',
      pattern: {
      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
      message: 'invalid email address'
      }
    }}
    defaultValue=""
  />
  {fieldsErrors.email?.type && <p>{fieldsErrors.email?.message}</p>}