MUI多行TextField的event.target.value未包含\n的问题求助

你遇到的问题是MUI多行TextField输入换行后，event.target.value里没有正确包含\n，可以通过以下方式处理：

核心解决方案：统一换行符格式 #

修改你的handleWelcomeTextChange函数，将输入内容中的所有换行符（包括Windows系统的\r\n）统一替换为\n：

const [welcomeText, setwelcomeText] = React.useState(welcome.welcomeText);
const handleWelcomeTextChange = (event) => {
  // 替换所有\r\n格式的换行为\n，确保统一格式
  const normalizedValue = event.target.value.replace(/\r\n/g, '\n');
  setwelcomeText(normalizedValue);
};

额外检查点 #

• 确认你的TextField没有设置影响输入格式的额外属性，比如inputProps={{ wrap: 'hard' }}（默认soft模式不会干扰换行符的正常获取）
• 如果后端返回的初始化文本本身换行符格式不统一，初始化时也需要做一次统一处理：

const [welcomeText, setwelcomeText] = React.useState(
  welcome.welcomeText.replace(/\r\n/g, '\n')
);

这样处理后，无论是手动输入的换行还是后端初始化的内容，都会统一使用\n作为换行标记，后端接收时就能正确获取到对应的换行符了。

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