Javascript （P） 功能组件中的反应触发方法

我正在Preact中构建一个表单，并努力验证表单提交中的输入

组件从

validate.js

获得验证对象，并自行处理验证

父组件是一个表单，它以

formData

状态存储数据，并将值提交给API

在提交之前，我想再次验证数据，以防止用户跳过一些必需的输入

问题：解决这个问题的“反应方式”是什么

输入：

导出默认函数TextInput（{onChange，validation}）{
const[value，setValue]=useState（null）；
const[error，setError]=useState（null）；
useffect（（）=>{
onChange&&onChange（值）；
}，[价值]；
常量车把LUR=（e）=>{
常量值=e.currentTarget.value；
如果（验证）{
常量错误=validate.single（值，验证）；
如果（错误）{
setError（错误[0]）；
}
}
};
返回(
setValue（e.target.value）}
onFocus={（）=>setError（null）}
/>
//显示一些错误消息。如果设置了错误
);
}

表格：

export default function CompetitionForm（）{
const[formData，setFormData]=useState（{}）；
const submitForm=async（e）=>{
e、 预防默认值（）；
//验证数据，提交表格
};
常量竞争输出=（键）=>{
返回(
{
formData[键]=值；
setFormData（formData）；
}}
/>
);
};
返回(
{CompetitionDemiPut（'firstName'）}
{CompetitionDemiPut（'lastName'）}
);
}

试试下面的方法。希望能有所帮助

  //Form:

  const submitForm = async (e) => {
    e.preventDefault();
    e.stopPropagation();
    // validate data, submit the form
  };

  render() {
    const { validated } = this.state;
    ......
   return (
    <Form noValidate validated={validated} onSubmit={submitForm}>
    </form>
     );
  }

//格式：
const submitForm=async（e）=>{
e、 预防默认值（）；
e、 停止传播（）；
//验证数据，提交表格
};
render（）{
const{validated}=this.state；
......
返回(
);
}

看看我对这个问题的回答，手动进行验证会有所帮助