如何获得输入.值在onChange事件期间以Formik形式显示

Question

我目前正在使用Formik库在React JS中制作表单。我遇到了一个验证问题，我需要用空字符串更改无效字母。

str.replace(/D/, ');

但是我无法访问Formik中的input值。我需要验证每个键点击的值，但在Formik文档中没有关于它的信息。

组件Form:

import React, {useEffect} from 'react';
import { useHistory } from 'react-router-dom';
import { Formik, Form, useFormikContext } from 'formik';
import * as Yup from 'yup';
import FormInput from '../Inputs/FormInput';

const EditUserSchema = Yup.object().shape({
surname: Yup.string()
.required('Поле обязательно'),
userName: Yup.string()
.required('Поле обязательно'),
patronymic: Yup.string()
.required('Поле обязательно'),
phone: Yup.string()
.required('Поле обязательно'),
email: Yup.string()
.required('Поле обязательно')
});


<Formik
initialValues = {{
surname,
userName,
patronymic,
phone,
email
}}
validationSchema={EditUserSchema}
onSubmit = {values => {
alert(JSON.stringify(values, null, 2))
}}
>
{formik => (
<Form id="edit-user-form"> 
<FormInput
label="Фамилия"
name="surname"
type="text" 
formik={formik}/>
<FormInput
label="Имя"
name='userName'
type='text'/>
<FormInput
label="Отчество"
name="patronymic"
type="text" />
<FormInput
label="Телефон"
name="phone"
type="phone" />
<FormInput
label="Почта"
name="email"
type="email" 
validate={validateEmail}/>
</Form>
)}
</Formik>

需要验证的组件:

import React, { useEffect } from 'react';
import { ErrorMessage, useField } from 'formik';
import './formInput.scss';
const FormInput = ({label='', formik, placeholder=null, classNames='', ...props}) => {
const [field, meta] = useField(props);

return (
<div className="form__input-wrapper">
<label htmlFor={field.name}>{label}</label>
<input
className={`${classNames}`}
{...field} {...props}
/>
{meta.touched && meta.error ? (<div>{meta.error}</div>) : null}
{/* <ErrorMessage component="div" name={meta.error}/> */}
</div>
)

}

export default FormInput;

Answer 1

首先，您需要在表单中添加一个提交按钮然后您需要在表单中添加formik handlessubmit，如下所示

<Form id="edit-user-form" onSubmit={formik.handleSubmit}> 

现在你应该在formik的onSubmit函数中得到所有的输入值，你可以使用string.replace()函数来替换最终的输入值，然后用这些值提交你的表单。

Yup只能检查验证错误，但不能更新这些值