React中使用redux-form时如何净化输入的格式化粘贴文本为纯文本？

问题原因 #

你当前的正则仅能处理HTML标签和空格类格式，你拿到的格式化字符串𝙀𝙙𝙪𝙖𝙧𝙙𝙤本质是Unicode编码的装饰性兼容字符，本身就属于纯文本范畴，所以去HTML的逻辑不会有任何效果。

实现步骤 #

• 第一步：使用ES6内置的String.prototype.normalize()方法，参数传入NFKC（兼容等价组合），可以直接将所有花式 Unicode 字母映射为普通ASCII字母
• 第二步：阻止默认粘贴行为，将处理后的纯文本手动更新到redux-form的对应字段

完整代码示例 #

<Field
    name="dni"
    component={InputWithFormGroup}
    label={t('你的label文案')}
    placeholder={t('你的placeholder文案')}
    validate={[required, DNIorNIE]}
    onPaste={(e, props) => {
        e.preventDefault();
        const pastedText = e.clipboardData.getData('text/plain');
        // 核心转换逻辑
        let sanitizedString = pastedText.normalize('NFKC');
        // 可选：如果需要同时去除重音符号，加上下面这行
        // sanitizedString = sanitizedString.replace(/[\u0300-\u036f]/g, '');
        
        // 更新redux-form字段值，两种方式二选一：
        // 方式1：如果组件能拿到redux-form注入的change方法，直接用
        props.change('dni', sanitizedString);
        // 方式2：手动dispatch action，替换下面的yourFormName为你表单配置的name值
        // e.target.form.dispatch({
        //   type: '@@redux-form/CHANGE',
        //   meta: { form: 'yourFormName', field: 'dni' },
        //   payload: sanitizedString
        // })
    }}
/>

额外说明 #

• 如果你需要支持更多特殊字符的转换，可以在normalize后追加自定义的字符替换逻辑
• 如果使用自定义输入组件，需要确保InputWithFormGroup组件正确透传了onPaste事件和redux-form注入的change方法

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