当我 post 来自多行文本字段的数据时保留新行的最佳方法

Question

当我 post 来自多行文本字段的数据时，保留新换行的最佳方法是什么

我正在研究 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,
    });
  };

我希望保持输入的文字不变

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

Answer 1

解决此问题的一种方法是，您可以用换行符

替换回车符 return

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

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

代码沙盒：https://codesandbox.io/s/dazzling-bartik-2rokv?file=/src/App.js

当我 post 来自多行文本字段的数据时保留新行的最佳方法

Best way to preserve new lines when I post data from a Multi Line Text Field

multiline

reactjs

material-ui