Antd Form 提交Input.TextArea文本时换行符丢失如何解决？

Antd Form 文本域保留换行的解决方法 #

Antd Form 本身不会主动过滤Input.TextArea输入的换行符，换行丢失一般是读取表单值的方式有误，或是渲染内容时没有处理换行符导致的，可按以下步骤修复：

1. 正确读取表单提交的原始值 #

Input.TextArea的输入值会被Antd Form完整收集，包含原始的\n换行符，你只需要在表单提交回调中正确读取对应字段即可，完整示例代码如下：

import { Form, Input, Button } from 'antd';

const CommentSubmitForm = () => {
  const [form] = Form.useForm();

  const handleSubmit = (values) => {
    // values.itemLore 已经包含完整的换行符，直接传给提交接口即可
    const itemLore = values.itemLore;
    console.log("提交的评论内容：", itemLore);
    submitLore(itemLore);
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item 
        name="itemLore" 
        initialValue="(Tell a story...)"
      >
        <Input.TextArea placeholder="(Tell a story...)" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交评论
        </Button>
      </Form.Item>
    </Form>
  );
};

2. 渲染提交的内容时处理换行符 #

如果是将提交的内容渲染到HTML页面上，HTML默认不识别\n换行符，需要额外处理，常用两种方案：

• 方案一：使用CSS样式兼容，给内容容器添加white-space: pre-wrap属性，自动保留换行、空格格式：

.comment-content {
  /* 自动识别\n换行，保留空格，超出自动换行 */
  white-space: pre-wrap;
  word-wrap: break-word;
}

• 方案二：将换行符替换为HTML的<br>标签后渲染，注意必须先做XSS过滤避免恶意脚本注入：

import xss from 'xss';

const renderCommentContent = (content) => {
  // 先过滤不安全的脚本内容
  const safeContent = xss(content);
  // 替换所有换行符为br标签
  const htmlContent = safeContent.replace(/\n/g, '<br />');
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
};

验证方式 #

在表单提交的onFinish回调中打印对应字段值，若控制台输出的内容中可见\n，则说明Antd Form已经正确保留了输入的换行，只需要按第二步处理渲染逻辑即可。

内容的提问来源于stack exchange，提问作者Ghost Outfit