是的错误不会在 onBlur 之前触发

Question

我希望这个输入字段的 Yup 错误在记录一个键时立即触发，以获得最大的交互性。但是，只有在单击文本字段之外时，我才会收到错误。在第一个 onBlur 事件发生并且我单击文本字段后，实时显示下一个错误。

我怎样才能改变这种行为？如果我的第一个字符不是字母或者我的名字不是 5-12 个字符长，我希望立即出现错误。

这是我的代码：

import ReactDOM from 'react-dom';
import { useFormik } from 'formik'
import * as Yup from 'yup';

function Container(){
  const formik = useFormik({
    initialValues: {
      prodName: ''
    },
    validationSchema: Yup.object(
      {
        prodName : Yup.string().required('This field is required')
        .matches(/^[aA-zZ\s]+$/, "Only letters are allowed for this field ")
        .min(5,'Minimum is 5').max(12, 'No more than 12')
        
      }
    )
  })
  
  return(
    <div id='prd-contain'>
      <form onSubmit={formik.handleSubmit}> 
          <label className='prd-labels'>Product name</label>
          <input type="text" id="prodName" name="prodName" value={formik.values.prodName}
                 onChange={formik.handleChange} onBlur={formik.handleBlur}/>
          {formik.touched.prodName && formik.errors.prodName ? (<div>{formik.errors.prodName}</div>) : null}

          <input type="submit" value="Submit"/>
        </form>
    </div>
  )
}

ReactDOM.render(
  <Container />,
  document.getElementById('root')
);

Answer 1

你可以简单地改变

<input type="text" id="prodName" name="prodName" value={formik.values.prodName} onChange={formik.handleChange} onBlur={formik.handleBlur}/>

至

<input type="text" id="prodName" name="prodName" value={formik.values.prodName} onChange={formik.handleChange} onkeyup={formik.handleBlur}/>

是的错误不会在 onBlur 之前触发

Yup errors don't fire before onBlur

onblur

reactjs

yup

formik