MUI Multiline event.target.value not showing n

Question

我目前有一个多行文本框，每当通过网站创建新行时，它不会在后端反映为n。

目标是每当event.target.value被调用时，每个新行都等于一个n。

const [welcomeText, setwelcomeText] = React.useState(welcome.welcomeText);
const handleWelcomeTextChange = (event) => {
setwelcomeText(event.target.value);
};

<TextField
id="outlined-multiline-flexible"
label="Welcome Text Description"
multiline
fullWidth
maxRows={10}
value={welcomeText}
defaultValue={welcome.welcomeText}
onChange={handleWelcomeTextChange}
/>

我试图实现一个修复来检测间距并将其转换为n，但这不起作用。

Answer 1

你可以使用添加样式道具到排版组件

<Typography style={{ whiteSpace: 'pre-line' }}>{'hello nMUI'}</Typography>

我也花了将近一个小时来寻找那个愚蠢的n的解决方案。

希望有帮助。