从多行文本字段发布数据时,保留换行的最佳方法

问题描述

当我从多行文本字段中发布数据时,保留新的换行符的最佳方法是什么

我正在研究ReacJS,

    <Grid item xs={12}>
          <TextField
            id="outlined-multiline-static"
            multiline
            fullWidth
            name={"Description"}
            margin="normal"
            placeholder="Describe tu proyecto aqui..."
            onChange={handleupdateField}
            value={formpublishProject.Description}
            rows={4}
            variant="outlined"
          />
        </Grid>

我将值保留在状态中

  const handleupdateField = (e) => {
    setState({
      ...formpublishProject,[e.target.name]: e.target.value,});
  };

我想保持输入文字不变

Multi Line Text Field

但是当我在控制台日志中提交此输入时,显示描述字符串,例如“ Hello,↵↵-这是新行↵↵↵”,如果将文本保存在数据库中时将得到此值,则它将显示输入符号(↵),我想显示与输入相同的多行文字

ConsoleLog

解决方法

一种解决方法,可以用换行符代替回车符

state = {
    description: `Hello,↵↵-This is the new line↵↵↵` // some example string coming from the database
};

<TextField
    multiline
    value={this.state.description.replace(/↵/g,"\n")}
    ...
/>

CodeSandBox:https://codesandbox.io/s/dazzling-bartik-2rokv?file=/src/App.js