想使用反应钩子在handlechange上显示验证错误

Question

我是 React 16 的新手，请找到下面我用于使用钩子进行验证的代码。我使用了一个可重复使用的选择框，在选项的值上，我显示了一个输入框。 验证规则：如果单击提交时选择框为空，我想在选择值时显示错误并隐藏它，如果输入框为空，则在我们提供有效输入时显示错误并隐藏。 Problem : When error message appears for select box and after selecting the value when input box appears it shows the error for that too so it's like the first look of input box is with the validation error.我想在用户点击提交按钮时显示它，并且在有效输入后它应该消失。

非常感谢您的帮助！

  const Step3 = (props) => {
    const [values, setValues] = useState({});
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isSent, setIsSent] = useState(false);
    const { handleChange, handleSubmit } = useForm(validate);
    useEffect(() => { if (Object.keys(errors).length === 0 && isSubmitting) { } }, [errors]);

    const onChange = (event) => { 
        event.persist && event.persist(); 
        setIsSubmitting(false);
        const newValues = {...values,[event.target.name]:event.target.value};
        isSent && setErrors(validate(newValues));
        setValues(values => newValues);
     };
    const handleSubmit = (event) => { 
        if (event) event.preventDefault(); 
        setErrors(validate(values)); 
        setIsSubmitting(true); 
        setIsSent(true);
    };
return (
    <div>
        <form onSubmit={handleSubmit} noValidate>
          <Select
            name="abc"
            label="ABC"
            options={options}
            onChange={onChange}
            
        />
          {errors.abc && (<p className="help is-danger">{errors.abc}</p>)}
          
            {values.abc=='Apple' && <input name="xyz" value={values.xyz||'' onChange={onChange}}/>
                {errors.xyz && (<p className="help is-danger">{errors.xyz}</p> )}
            }
            
          <Button type={submit}>
            Submit
          </Button>
        </form>
    </div>
  );
};

function validate(values) {
     let errors = {}
     if (!values.abc)
     { errors.abc= ' required'; }
     if (!values.xyz) {
     errors.xyz= 'required'; 
     }
     return errors;
 };

Answer 1

useForm({ mode: 'onChange' })

文档： https://react-hook-form.com/api#useForm

示例： https://codesandbox.io/s/react-hook-form-defaultvalues-v6-forked-s9buh?file=/src/index.js