我有一個只接受一個用戶輸入的表單。我還使用了 react formik 作為表單,并使用了 yup 進行驗證。
我希望在驗證輸入后將用戶帶到下一頁。
驗證正在作業,但單擊下一頁按鈕不會進入下一頁。
這是我的代碼;
.
.
.
const Home = () => {
const navigate = useNavigate()
const initialValues = {
phoneNumber: ''
}
const onSubmit = values => {
console.log('form data', values)
navigate.push("/NextPage")
}
const validationSchema = Yup.object({
phoneNumber: Yup.string()
.min(11, 'Invalid phone number format!')
.max(11, 'Invalid phone number format!')
.required('Please enter your phone number!'),
})
return (
{/*...*/}
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}>
<Form className='phone-input'>
<Field
type='tel'
id='phone-input'
name='phoneNumber'
placeholder='0000-000-0000'
/>
<ErrorMessage name='phoneNumber'>
{
(errorMsg) => <div className='error'>{errorMsg}</div>
}
</ErrorMessage>
<button type='submit' id="phoneBtn" onClick={onSubmit}>Next Page</button>
</Form>
</Formik>
</div>
)
}
export default Home
uj5u.com熱心網友回復:
我認為您不需要執行 .push() 來導航。只需使用-
navigate("/NextPage")
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/437163.html
上一篇:洗掉表單SwiftUI中的行
