我正在尝试验证React应用程序中的表单onSubmit。我想添加一些功能，例如，当其中一个条件返回false时，红色轮廓将被添加到该输入中，并且在该输入中将是带有该Error的占位符。
这是在主文件中渲染的组件之一。该组件通过点击设置报警按钮调用。这并不重要，但重要的是，我将getInfo((函数作为道具从主组件发送到该组件。当验证返回真实时，我需要调用此函数
表单由3个输入字段和一个按钮组成，但我不需要检查第一个。
由于我的应用程序是闹钟，当你点击设置闹钟按钮时会弹出这个表格，我需要检查
第一个输入不是空的，如果它的值不超过24(在这个输入中，您设置了报警时间(第二个输入不是空的，如果它的值不超过60(在这个输入中，您设置了警报的分钟数(我的想法是为这些值创建状态，并创建应该更新状态的函数。函数调用onChange来更改特定的输入。
const [validate,setValidate] = useState({
message:'',
hours:'',
minutes:''
})
function updateHours(e){
let value = e.target.value
setValidate(prevState => ({
...prevState,
hours:value
}))
}
function updateMinutes(e){
let value = e.target.value;
setValidate(prevState => ({
...prevState,
minutes:value
}))
}
到目前为止，一切都很顺利。然后我尝试创建一个新的函数来验证这些值，并返回结果。此函数将被调用onSubmit，如果返回true，则表示一切正常，表单将被发送。
let getInfo = props.getInfo;
function validateForm(){
if(validate.hours > 24){
alert('enter correct hours !')
return false;
}
if(validate.minutes > 60){
alert('enter correct minutes !')
return false;
}
return getInfo;
}
我试着在谷歌上搜索如何在Submit上做到这一点，我能找到的只是这种方法，但没有奏效。它的行为就像没有调用任何函数一样。
<form onSubmit="return validateForm">
<FontAwesomeIcon
icon={faTimesCircle}
className="closeIcon"
onClick={() => setAlarm(false)} />
<h3>Please set your alarm</h3>
<label htmlFor="text">Message</label>
<input type="text" id="text" autoComplete="off" autoFocus="on" />
<div className="flex">
<div className="inputNumber">
<label htmlFor="hours">Hour</label>
<input type="number" id="hours" name="hours" onChange={updateHours} />
</div>
<div className="inputNumber">
<label htmlFor="minutes">Minute</label>
<input type="number" id="minutes" name="minutes" onChange={updateMinutes} />
</div>
</div>
<button onClick={()=>setAlarm(false)}>SET ALARM</button>
我知道它看起来有点像，但试过这样的东西吗？与其返回函数，不如调用它。
function validateForm(){
if(validate.hours > 24 || validate.minutes > 60) {
if(validate.hours > 24) alert('enter correct hours !')
if(validate.minutes > 60) alert('enter correct minutes !')
}
else getInfo();
}
如果对你没有帮助，你能给我们提供一个可复制的例子来更好地理解吗：((你可以使用codesandbox.io(
我发现我几乎从不依赖react中的默认表单提交，而是通常会调用一些API。我希望你会这样做，所以我会推荐一个考虑到这一点的解决方案。
首先，验证功能。它应该阻止默认的表单提交，检查表单值并设置错误状态。如果一切正常，那么它应该提交操作。
function validateForm(e) {
e.preventDefault(); //stop the default browser behavior
if(validate.hours > 24){
alert('enter correct hours !')
return;
}
if(validate.minutes > 60){
alert('enter correct minutes !')
return;
}
performMyApiCall();
}
第二，html。请记住，onSubmit是React组件上的React属性。你需要给它一个函数。该函数将采用一个参数e，它是事件的详细信息。
<form onSubmit={validateForm}>
//snip
</form>
这将帮助您手动设置验证。也就是说，除非我在做一些不同寻常的事情，否则我会使用现有的包来进行表单验证。我使用materialui作为前端库，因此经常使用react materialui表单验证器。