带Validate.js的React搜索组件交互与校验异常问题

核心问题点 #

• 未用状态管理输入值：依赖inputRef获取输入值，输入变化不会触发组件重新渲染，导致currentValue和validateErrors始终是初始值，首次输入时校验、搜索都无法拿到最新数据。
• 校验逻辑时机错误：validateErrors在组件渲染时计算，但输入值变化不触发渲染，校验结果不会更新；防抖后的handleChange里用的还是旧的校验结果，导致校验判断失效。
• 事件处理中的值引用错误：handleChange里的currentValue是渲染时的旧值，不是当前输入值；setInputIsTouched时机滞后，首次输入时错误提示无法触发。

修复后的代码 #

interface IProps {
  onSearchChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const Search: React.FC<IProps> = ({ onSearchChange }) => {
  // 用useState管理输入值，确保输入变化触发组件渲染
  const [value, setValue] = useState("");
  const [inputIsTouched, setInputIsTouched] = useState(false);

  // 基于当前输入值实时计算校验错误
  const validateErrors = validate({ currentValue: value }, constraints);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = event.target.value;
    setValue(inputValue);
    setInputIsTouched(true);

    // 基于当前输入值做校验，而非旧的校验结果
    const currentErrors = validate({ currentValue: inputValue }, constraints);
    if (currentErrors?.currentValue) {
      return;
    }

    inputValue && onSearchChange && onSearchChange(event);
  };

  // 用useCallback包裹防抖函数，避免每次渲染重新创建实例
  const debouncedOnChange = useCallback(debounce(handleChange, 1000), []);

  return (
    <div className={classes['Root']}>
      <Input
        type="text"
        autoComplete="off"
        placeholder="..."
        onChange={debouncedOnChange}
        value={value} // 绑定受控组件值
        onFocus={() => setInputIsTouched(true)} // 聚焦时标记为已触碰
        onBlur={() => setInputIsTouched(true)}
        isError={inputIsTouched && !!validateErrors?.currentValue}
      />

      <div className={classes['ErrorContainer']}>
        {inputIsTouched && validateErrors?.currentValue && (
          <Text color="error" size="s">
            {validateErrors.currentValue}
          </Text>
        )}
      </div>
    </div>
  );
};

关键改动说明 #

1. 改用受控组件：用useState存储输入值value并绑定到Input组件，输入变化时通过setValue更新状态，触发组件重新渲染，确保validateErrors能实时更新。
2. 实时校验逻辑：在handleChange中针对当前输入值单独做校验，避免依赖组件渲染时的旧校验结果，保证校验判断准确生效。
3. 优化触碰状态触发：新增onFocus时标记inputIsTouched为true，确保首次聚焦输入就能触发校验错误提示。
4. 防抖函数性能优化：用useCallback包裹防抖函数，避免组件每次渲染都重新创建防抖实例，减少不必要的性能消耗。

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