React中用setValue限制useFieldArray输入框特殊字符问题

问题分析 #

你当前的代码仅执行了setValue赋值操作，未对输入值做非法字符过滤，同时可能因React Hook Form的状态更新机制，导致输入框未能同步更新表单状态。核心要先过滤非法字符，再确保表单状态与输入框值同步。

解决方案步骤 #

1. 编写字符过滤函数

先定义过滤函数，移除数字和特殊字符，只保留允许的字符（示例保留中文、英文大小写、空格，可根据需求调整正则规则）：

const filterValidChars = (value) => {
  // 匹配并移除数字、特殊字符，保留中文、英文、空格
  return value.replace(/[^a-zA-Z\u4e00-\u9fa5\s]/g, '');
};

2. 修改输入处理逻辑

有两种可行实现方式，任选其一即可：

方式一：覆盖register的onChange事件

若输入框使用register绑定，直接在onChange中过滤值后调用setValue，添加状态更新配置确保输入框同步：

const handleWarningName = (name, rawValue) => {
  const filteredValue = filterValidChars(rawValue);
  // 添加配置项确保表单状态标记为已修改、已触碰，触发输入框重渲染
  setValue(name, filteredValue, { shouldDirty: true, shouldTouch: true });
};

// 在useFieldArray的map渲染中：
{fields.map((item, index) => (
  <div key={item.id}>
    <input
      {...register(`warning.${index}.name`)}
      onChange={(e) => handleWarningName(`warning.${index}.name`, e.target.value)}
    />
  </div>
))}

方式二：使用Controller组件（更可控）

若需要更精准的状态控制，用Controller组件包裹输入框，直接在render函数中处理过滤逻辑：

import { Controller } from 'react-hook-form';

// 在useFieldArray的map渲染中：
{fields.map((item, index) => (
  <div key={item.id}>
    <Controller
      name={`warning.${index}.name`}
      control={control} // 从useForm解构得到的control对象
      render={({ field: { onChange, value } }) => (
        <input
          value={value || ''}
          onChange={(e) => {
            const filtered = filterValidChars(e.target.value);
            onChange(filtered);
          }}
        />
      )}
    />
  </div>
))}

关键注意点 #

• 正则表达式可根据实际需求调整，若允许特定特殊字符，可将其加入正则白名单；
• 使用setValue时的配置项是确保输入框同步更新的关键，避免表单状态更新但输入框未渲染最新值；
• 使用Controller时必须传入从useForm解构的control对象，否则无法正常绑定表单状态。

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