Javascript Reactjs中document.getElementById（）.setCustomValidity（）的等效值是多少

您好，我的问题是在Reactjs中为我的注册表创建document.getElementById（）.setCustomValidity（）的等效值以验证firstname输入字段

这是我的密码

function CreateAcc() {

   const[name,setName] = useState({firstname:''})

   const onChangehHandle = e => setName({firstname: e.target.value})

   const onblr = () =>{
      if(name.firstname==''){
          //here i just want to change the alert to document.getElementById().setCustomValidity() to 
            validate the firstname input field
          
         alert('Please fill out this input field')
      }
  } 
   return (
      <div>
        
        <form id='createAccForm'>
        <h2>Create Account</h2>
        <div className='text-box'>
            <label><FaUserCircle size='20px'/></label>
            <input className='createAccInputInline' id = 'firstname' type='name' name = 'firstname' placeholder='First Name' onBlur={onblr} value ={name.firstname} onChange={onChangehHandle}/>
            <input className='createAccInputInline' type='name' name = 'lastname' placeholder='Last Name' />
        </div>

        <div className='text-box'>
            <label htmlFor = 'email'><MdEmail size='20px'/></label>
            <input id = 'email' type='email' placeholder='Email Address'/>
        </div>

        <div className='text-box'>
            <label><BsFillLockFill size='20px'/></label>
            <input className='createAccInputInline' type='password' placeholder='Password'/>
            <input className='createAccInputInline' type='password' placeholder='Confirm Password'/>
        </div>

        <button id = 'createAccButton'>Sign Up</button>

        </form>
    </div>
)
}

export default CreateAcc

函数CreateAcc（）{
const[name，setName]=useState（{firstname:'}）
const onChangehHandle=e=>setName（{firstname:e.target.value}）
const onblr=（）=>{
如果（name.firstname==“”）{
//这里我只想将警报更改为document.getElementById（）.setCustomValidity（）为
验证firstname输入字段
警报（'请填写此输入字段'）
}
} 
返回(
创建帐户
注册
)
}
导出默认CreateAcc

setCustomValidity

将选择元素的自定义有效性消息设置为指定的消息-但是您的问题似乎想要读取该值？还是我理解错了？你需要使用REF，然后在坐骑上设置自定义validy。。然后在模糊选项中，你可以触发红色的有效性检查。。。第二种选择是控制组件。。。