Reactjs Firebase Firestore未接收数据库中的输入/返回，带有物料ui和react

我的代码工作正常，但当我在“material UI文本字段”中键入并尝试在Firestone中设置文档时，它不包含任何返回。整个文档是一个大字符串，没有任何分隔

这使得它很难在数据库中使用

了解如何通过firebase comsole在firebase数据库中输入信息也很有用*

代码的相关位

文本字段

  import TextField from '@material-ui/core/TextField';

<form onSubmit={this.submit}>
    <TextField  
      className={Style.TextField}
      multiline
      rows="9"
      size="small" variant="filled" 
value= {this.state.Bio}
onChange= {this.BioChange}/>

例如，如果我在文本字段中键入并提交

“我可以提交多少行

也许1

也许3“

结果将是：

---

“我提交多少行cna？也许1也许3“

您可以使用正则表达式来实现这一点。
首先，在

textarea

值中将换行符替换为“\n”

inputValue.replace(/\n/g, "\\n");

现在将此新值发送到firestore。
要再次显示该值，请反向执行该过程

receivedValue.replace(/\\n/g, "\n");

---

对上述答案进行补充。 如果你有“返回键”的东西，即使在你的状态下，你也需要添加

<div style = {{ whiteSpace: 'pre-line'}}

---

我的意思是当我在网站上输入时。而不是当我输入要显示的HTML时。或者如果n/是用于文本字段的，我应该把它放在哪里？你可以将这个/n存储在返回字段中，在显示时使用@Ahmedsaid@AlexanderHemming检查更新后的答案，我希望它会有帮助。相反的答案似乎没有帮助o work.this.setState（{Bio:docSnapshot.data（），body:this.state.Bio.replace（/\n/g，“\\n”）}）；和{this.state.Bio.Bio}{this.state.body.Bio}只显示this.state.body.Bio}。另一个不存在。我按照您的建议做了，它用返回键补充替换了/n，但这仍然导致缺少新行。
<div style = {{ whiteSpace: 'pre-line'}}