e.target.value 未在 React useState 中定义

Question

  const validationSchema = yup.object({
  password: yup
    .string('Enter your password')
    .min(8, 'Password should be of minimum 8 characters length')
    .required('Password is required'),
});
  
const formik = useFormik({
    initialValues: {
      password: '',
    },
    validationSchema: validationSchema,
  onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });



              <form onSubmit={formik.handleSubmit}  style={{ width:'100%' }}>
              
  <div className="relative w-full flex items-center">
    <RedditTextField
      fullWidth
      type={passwordType}
      className="mb-5"
      id="outlined-adornment-password"
      placeholder="Password"
      name="password"
      onChange={formik.handleChange}
      error={formik.touched.password && Boolean(formik.errors.password)}
      helperText={formik.touched.password && formik.errors.password}
    />

  </div>
</div>



        <Button
        type="submit"
          // onClick={}
          variant="outlined"
          style={{ backgroundColor: '#FF5758', color: 'white', width: '100%', height: '50px', border: 'none' }}
          size="large"
          endIcon={!isLoading && <SendIcon />}
          loading={isLoading}
        >
          {isLoading ? "Fetching..." : "Sign Up"}
        </Button>

              </form>

表单没有错误，但是注册按钮没有提交表单，您认为每个输入和按钮都应该是表单标签本身的直接子级吗？如果有人在网上看到过此类问题或在文档中解决过此类问题，我将不胜感激

Answer 1

您的

onSubmit

标签上的

<form>

属性具有

formik.handleSubmit

函数，但从代码来看，

formik

具有

onSubmit

函数，而不是

handleSubmit

函数。

尝试：

<form onSubmit={formik.onSubmit}  style={{ width:'100%' }}>

或 将

formik

中的函数更改为：

const formik = useFormik({
    initialValues: {
      password: '',
    },
    validationSchema: validationSchema,
  handleSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

让我知道事情进展如何:)👍🏽