Javascript 如何在<；选择>；元素更改，但保留表单中其他输入的验证？

我的React表单组件由所需的文本

和

元素组成

我想在每次选择更改时提交表单，但前提是填写了所需的文本输入。但是，下面的代码将提交表单，即使所需的文本输入为空

如果文本输入为空，如何防止在选择更改时使用表单？我知道我可以将文本输入值添加到组件状态并检查其是否为空，但我还需要在输入为空时创建自己的警告工具提示等（浏览器已经为所需输入提供了工具提示）

const Form=（）=>{
const handleSubmit=（e:any）=>{
警报（'提交'）
}
返回(
A.
B
)
}

有很多方法可以做到这一点。您没有检查输入是否为空。其中一种方法是-你可以使用

从'react'导入{useRef}；
const inputRef=useRef（）；
const handleSubmit=（e:any）=>{
if（输入当前值）{
警报（'提交'）
}
否则{
警报（'空输入'）
}
}

在handlesubmitThanks中提交之前，检查值是否存在，但我还需要创建自己的警告，说明字段为空。有没有办法为必填字段保留本机浏览器警告？

const Form = () => {

    const handleSubmit = (e: any) => {
        alert('submitting')
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" required />
                <select onChange={handleSubmit}>
                    <option>a</option>
                    <option>b</option>
                </select>
                <input type="submit"/>
            </form>
        </div>
    )
}

import { useRef } from 'react';

const inputRef = useRef();

<input ref={inputRef} type="text" required />

    const handleSubmit = (e: any) => {
        if (inputRef.current.value) {
        alert('submitting')
        }
        else {
         alert('empty input')
        }
    }