react-simple-validator在React Hooks函数组件中验证不生效问题

问题排查&修复方案 #

• validator 实例未持久化
  函数组件每次重新渲染时都会重新执行整个函数体，当前写法每次渲染都会new一个新的SimpleReactValidator实例，之前存储的校验状态、错误消息都会被清空，自然没法展示。需要用useRef来持久化validator实例，保证整个组件生命周期内只用同一个实例。
• 调用showMessages后未触发组件重渲染
  SimpleReactValidator本身不会主动触发React组件的重渲染，调用validator.showMessages()之后，组件不会重新执行渲染逻辑，自然看不到更新后的错误提示。需要加一个强制更新的状态，在校验不通过时触发重渲染。
• 代码存在语法错误
  input的onChange属性少了左大括号，onChange=handleChange("title")} 应该改为 onChange={handleChange("title")}，否则代码运行会直接报错。
• 冗余的bind操作
  函数组件中不存在类组件的this指向问题，submit按钮的onClick不需要写submitForm.bind(this)，直接传submitForm即可。

修正后完整代码

import React from "react";
import SimpleReactValidator from "simple-react-validator";

export default function ExampleForm (){
  const [values, setValues] = React.useState({
    title: '',
    email:'',
  });
  // 用useRef持久化validator实例
  const validator = React.useRef(new SimpleReactValidator({
    className: 'text-danger',
    messages: {
      email: 'That is not an email.',
    }
  })).current;
  // 用于强制触发重渲染的状态
  const [, forceUpdate] = React.useState(0);

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
    // 若需要输入时实时校验，可开启下方两行代码
    // validator.showMessageFor(name);
    // forceUpdate(prev => prev + 1);
  };

  const submitForm = ()=> {
    if (validator.allValid()) {
      alert('You submitted the form!');
    } else {
      validator.showMessages();
      // 触发重渲染，更新错误提示UI
      forceUpdate(prev => prev + 1);
    }
  }

  return (
    <div className="container">
      <div className="form-group">
        <label>Title</label>
        <input className="form-control" value={values.title}  onChange={handleChange("title")} />
        {validator.message('title', values.title, 'required|alpha')}
      </div>
      <div className="form-group">
        <label>Email</label>
        <input className="form-control" value={values.email} onChange={handleChange("email")} />
        {validator.message('email', values.email, 'required|email')}
      </div>
      <button className="btn btn-primary" onClick={submitForm}>Submit</button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Narasimhan R