Javascript 为什么setCustomValidity（）在React应用程序中不工作？

为什么

setCustomValidity（）

在React中不起作用？我错过什么了吗？与香兰素HTML和JS的作品很好。或者有其他方法可以轻松地使某些内容与

setCustomValidity

类似

反应代码：

class Form extends React.Component {
  formVal(e) {
    e.target.setCustomValidity("Test_1");
  }
  formVal2() {
    let inpt = document.getElementById("input");
    inpt.target.setCustomValidity("TEST_2");
  }
  render() {
    return (
      <div>
        <form>
          <input
            id="input"
            type="datetime-local"
            onBlur={this.formVal}
          />
        </form>
        <button onClick={this.formVal2}>Click </button>
      </div>
    );
  }
}

---

setCustomValidity

不会立即触发验证，您必须有一个表单提交事件来触发它，或者调用

checkValidity

。我已经更新了您的，以展示如何在React中实现这一点，下面也包括了它

类表单扩展了React.Component{
onChange（e）{
让date=newdate（date.parse（e.target.value））；
如果（日期>新日期（））{
e、 target.setCustomValidity（“请选择过去的日期”）；
}否则{
e、 target.setCustomValidity（“”）；
}
}
render（）{
返回(
提交
);
}
}
render（，document.getElementById（“根”））
您好，这里是您需要做的事情

import*as React from“React”；
导出默认函数表单（）{
const nameInput=React.useRef（null）；
const[nameVal，setNameVal]=React.useState（“”）；
const onSubmitHandler=（e:React.FormEvent）=>{
//处理您的提交
}
const onNameChange=（e:React.ChangeEvent）=>{
如果（！nameInput.current）返回；
setNameVal（e.currentTarget.value）；
const{validity}=nameInput.current；
if（nameInput.current.validity.badInput）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（nameInput.current.validity.customError）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（有效性.模式不匹配）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（validity.rangeOverflow）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（nameInput.current.validity.rangeUnderflow）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（有效期.步骤不匹配）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（有效期.tooLong）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（有效期.短）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（有效性.类型不匹配）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（validity.valid）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
if（有效期.值缺失）{
nameInput.current.setCustomValidity（“将消息设置为显示”）；
}
}
返回(
名称
提交
)
}

我的意思是，你不必添加所有这些，只需添加你关心的那些
检查函数formVal2，你不需要
。target
@Mikalai你是对的，但仍然不起作用。React中不建议通过
document.getElementById（）
获取元素。请注意，在Mac、Chrome上，如果提交表单时字段不在视口中，则错误消息将不可见！如果该字段在视口中可见，则只有我们才能看到正确的消息，否则，该resp字段将被聚焦，但错误消息不会出现！
<form>
  <input type="email" id="mail" name="mail">
  <button onclick="test()">Submit</button>
</form>

var input = document.getElementById("mail");
function test() {
 input.setCustomValidity("test")
}