React应用中基于React-Admin实现多语言表单输入的问题咨询

要为不同语言的输入框实现指定的字符限制需求，你需要基于React-Admin的TextInput自定义支持正则过滤的输入组件，通过限制允许输入的字符集来匹配对应语言的规则。以下是具体实现方案：

1. 自定义带字符限制的输入组件 #

创建RestrictedTextInput组件，借助React-Admin的useInput hook处理表单状态，同时添加输入和粘贴的字符过滤逻辑：

import { TextInput, useInput } from 'react-admin';
import { forwardRef } from 'react';

const RestrictedTextInput = forwardRef(({ allowedRegex, ...props }, ref) => {
  const inputProps = useInput(props);

  // 实时过滤输入的非允许字符
  const handleChange = (event) => {
    const { value } = event.target;
    const filteredValue = value.replace(new RegExp(`[^${allowedRegex.source}]`, 'g'), '');
    inputProps.onChange(filteredValue);
  };

  // 处理粘贴操作，过滤粘贴的非允许字符
  const handlePaste = (e) => {
    e.preventDefault();
    const pastedText = e.clipboardData.getData('text');
    const filteredText = pastedText.replace(new RegExp(`[^${allowedRegex.source}]`, 'g'), '');
    inputProps.onChange(inputProps.value + filteredText);
  };

  return (
    <TextInput
      {...inputProps}
      inputProps={{
        ...inputProps.inputProps,
        onChange: handleChange,
        onPaste: handlePaste,
      }}
      ref={ref}
    />
  );
});

export default RestrictedTextInput;

2. 定义各语言的允许字符正则 #

根据每种语言的字符特性，编写对应的正则表达式：

• 英文：允许大小写字母、数字及常见标点

  const englishRegex = /[a-zA-Z0-9\s.,!?'"-]/;
  

• 西班牙语：在英文基础上添加ñ及重音字符

  const spanishRegex = /[a-zA-Z0-9\s.,!?'"-áéíóúÁÉÍÓÚñÑ]/;
  

• 法语：在英文基础上添加重音字符及ç

  const frenchRegex = /[a-zA-Z0-9\s.,!?'"-éèêàâçÉÈÊÀÂÇ]/;
  

• 荷兰语：在英文基础上添加特殊元音标记及重音字符

  const dutchRegex = /[a-zA-Z0-9\s.,!?'"-ëïüáéíóúâêîôûàèìòùçËÏÜÁÉÍÓÚÂÊÎÔÛÀÈÌÒÙÇ]/;
  

3. 在表单中集成自定义组件 #

将RestrictedTextInput接入React-Admin的表单，为每个输入框传入对应语言的正则：

import { Edit, SimpleForm } from 'react-admin';
import RestrictedTextInput from './RestrictedTextInput';

const MultiLanguageEdit = () => (
  <Edit title="多语言表单">
    <SimpleForm>
      <RestrictedTextInput
        source="english_content"
        label="English"
        allowedRegex={/[a-zA-Z0-9\s.,!?'"-]/}
      />
      <RestrictedTextInput
        source="spanish_content"
        label="Spanish"
        allowedRegex={/[a-zA-Z0-9\s.,!?'"-áéíóúÁÉÍÓÚñÑ]/}
      />
      <RestrictedTextInput
        source="french_content"
        label="French"
        allowedRegex={/[a-zA-Z0-9\s.,!?'"-éèêàâçÉÈÊÀÂÇ]/}
      />
      <RestrictedTextInput
        source="dutch_content"
        label="Dutch"
        allowedRegex={/[a-zA-Z0-9\s.,!?'"-ëïüáéíóúâêîôûàèìòùçËÏÜÁÉÍÓÚÂÊÎÔÛÀÈÌÒÙÇ]/}
      />
    </SimpleForm>
  </Edit>
);

export default MultiLanguageEdit;

补充说明 #

• 组件会实时过滤输入和粘贴的内容，只保留对应语言允许的字符，满足你对不同输入框的语言限制需求。
• 你可以根据业务需求调整正则表达式，比如增减允许的标点符号或特殊字符。

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