Antd表单似乎无法处理换行符？
创始人
2024-11-07 09:31:39
0次

Antd表单在处理文本区域（TextArea）时无法自动处理换行符，需要在提交前手动处理换行符。

例如，如果您有一个文本区域的值为“Hello\nworld”，则可以在提交表单之前使用以下代码处理该值：

const fixedValue = value.replace(/\n/g, '
');

这将把换行符替换为HTML实体编码，然后您可以将处理过的值发送到服务器。在服务器端，您可以将HTML实体解码为正常的换行符。


const realValue = fixedValue.replace(/
/g, '\n');

如果您使用了React Hook Form来处理Antd表单，则可以使用register（）中的resolver选项来处理换行符。例如：

import {FieldError, useForm} from "react-hook-form";
import {Input, Form} from "antd";

const TextArea = Input.TextArea;

type FormValues = {
  message: string;
};

const resolver = (data: FormValues) => ({
  values: {
    ...data,
    message: data.message.replace(/\n/g, '
')
  }
});

const MyForm = () => {
  const {register, handleSubmit, errors} = useForm({resolver});

  const onSubmit = (data: FormValues) => {
    console.log(data.message.replace(/
/g, '\n'));
  };

  return (