Reactjs 要使用react钩子显示handlechange上的验证错误吗

我是React 16的新手，请查找下面的代码，我正在使用钩子进行验证。我使用了一个可重用的选择框，在选项的值上，我显示了一个输入框。 验证规则：如果单击“提交”时选择框为空，则我希望在选择值时显示错误并隐藏它，如果输入框为空，则在我们提供有效输入时显示错误并隐藏它。 问题：当选择框出现错误消息时，当输入框出现时，选择值后，它也会显示该错误，因此就像输入框的第一个外观是验证错误一样。我想在用户单击submit按钮时显示它，在有效输入后一旦更改，它就会消失

非常感谢你的帮助

  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;
 };

const Step3=（道具）=>{
const[values，setValues]=useState（{}）；
const[errors，setErrors]=useState（{}）；
const[isSubmitting，setIsSubmitting]=useState（false）；
常量[isSent，setIsSent]=useState（false）；
const{handleChange，handleSubmit}=useForm（validate）；
useffect（（）=>{if（Object.keys（errors）.length==0&&isSubmitting）{}，[errors]）；
const onChange=（事件）=>{
event.persist&&event.persist（）；
设置提交（假）；
const newValues={…values，[event.target.name]：event.target.value}；
ISENT&&setErrors（验证（新值））；
设置值（值=>新值）；
};
常量handleSubmit=（事件）=>{
if（event）event.preventDefault（）；
设置错误（验证（值））；
设置提交（真）；
设定值（真）；
};
返回(
{errors.abc&（
{errors.abc}
）}
{values.abc=='Apple'&&
{errors.xyz&（
{errors.xyz}
）}
}
提交
);
};
函数验证（值）{
让错误={}
如果（！values.abc）
{errors.abc='必需'；}
如果（！values.xyz）{
错误。xyz='必需'；
}
返回错误；
};

文件：

例如：

---

你能在这里简单地发布代码吗..请添加你的代码我已经添加了代码…谢谢，Nikhil和Adirp请告诉我一个解决方案。。。。单击“提交”按钮显示下拉验证时，输入框验证错误也会出现。我只想在用户忘记提供值并单击“提交”或提供无效数据时显示输入框验证错误。在提供有效选项时，更改应显示和隐藏。谢谢@Sheldon…请查找我的更新代码…问题是，只要我在下拉列表中选择值，下拉列表验证就会消失，但当输入框出现时，它与验证错误一起显示，因为已单击下拉框的“提交”按钮。期待您的回复。

useForm({ mode: 'onChange' })