react实现input过滤

React 实现 Input 过滤的方法

受控组件方式

通过 React 的受控组件机制实现输入过滤。将输入值保存在 state 中，并在 onChange 事件中处理过滤逻辑。

import { useState } from 'react';

function FilteredInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    // 过滤非数字字符
    const filteredValue = value.replace(/[^0-9]/g, '');
    setInputValue(filteredValue);
  };

  return (
    <input 
      type="text" 
      value={inputValue} 
      onChange={handleChange} 
    />
  );
}

使用防抖优化

对于频繁的输入过滤，可以添加防抖功能减少处理频率。

import { useState, useEffect } from 'react';

function DebouncedFilter() {
  const [inputValue, setInputValue] = useState('');
  const [filteredValue, setFilteredValue] = useState('');

  useEffect(() => {
    const timer = setTimeout(() => {
      // 过滤特殊字符
      const result = inputValue.replace(/[^a-zA-Z0-9]/g, '');
      setFilteredValue(result);
    }, 500);

    return () => clearTimeout(timer);
  }, [inputValue]);

  return (
    <>
      <input 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <p>过滤后: {filteredValue}</p>
    </>
  );
}

自定义 Hook 封装

将过滤逻辑封装成可复用的自定义 Hook。

function useInputFilter(initialValue, filterRegex) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    const newValue = e.target.value;
    const filtered = newValue.replace(filterRegex, '');
    setValue(filtered);
  };

  return [value, handleChange];
}

// 使用示例
function CustomFilterInput() {
  const [value, onChange] = useInputFilter('', /[^A-Za-z]/g);

  return (
    <input 
      type="text"
      value={value}
      onChange={onChange}
      placeholder="只能输入字母"
    />
  );
}

复杂过滤场景

对于需要保留特定格式的输入（如电话号码），可以使用更复杂的过滤逻辑。

function PhoneInput() {
  const [phone, setPhone] = useState('');

  const formatPhone = (value) => {
    // 移除所有非数字字符
    const numbers = value.replace(/\D/g, '');
    // 格式化为 xxx-xxx-xxxx
    if (numbers.length <= 3) return numbers;
    if (numbers.length <= 6) 
      return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
    return `${numbers.slice(0, 3)}-${numbers.slice(3, 6)}-${numbers.slice(6, 10)}`;
  };

  const handleChange = (e) => {
    setPhone(formatPhone(e.target.value));
  };

  return (
    <input
      type="tel"
      value={phone}
      onChange={handleChange}
      placeholder="123-456-7890"
    />
  );
}

这些方法涵盖了从基础到高级的输入过滤场景，可以根据具体需求选择合适的方式实现。