如何创建一个仅在输入不为空且> 0时才允许提交的表单？

Question

我想在提交之前制定一个逻辑，说明输入值不应该是任何空值，并且应该大于 0。

 const minValue = (input) => {
      if(input < 0){
       alert('input has to be greater than 0')
      }else{
        return input;
      }
    }    


 <Form className  = "workout-form">
    <div className ="form-row">
              <label className ="form__label">Distance</label>
              <input type = 'number' value = {distance}  min = '0' onChange = {(e) => setDistance(minValue(e.target.value))} className ="form__input form__input--distance" placeholder="mi"  autoFocus required/>
            </div>
     <button className ="form-btn" onClick = {submitWorkout}>Add Workout</button>
    </Form>

Answer 1

如果此代码适用于检查负值，您应该能够将 if (input < 0) 更改为 if ((input < 0) || (input != ""))

Answer 2

 const handleChange = e => { const value = parseInt(e.target.value); if(!isNaN(value) && value > 1){ setDistance(value) } }

 onChange={handleChange}