如何检测来自状态的字符串中的换行符？

Question

我无法检测到来自文本区域的换行符。标准的.replace('↵', '\n')不起作用，因为在我打电话给this.state.note时，返回字符已得到尊重。

从控制台：

> this.state {flashMessage: "", note: "one potato ↵two potato↵three potato↵four", showShareModal: false, isEditing: true}

> this.state.note "one potato two potato three potato four"

我试图使用encoudeURI并在字符串中搜索'\ n'-都没有运气。

有没有办法获取this.state.note的原始格式？

Answer 1

React会自动将'↵'替换为'\n'，因此，如果控制了文本区域，则组件的状态应保留包含'\n'个字符的文本区域的文本。发送（POST）和存储文本不应删除'\n'个字符，因此，据我所显示的代码所知，'\n'个字符仍然存在。

我怀疑问题仅在于HTML不使用'\n'作为其换行符，因此新行未显示在页面上。而是HTML使用<br/>。最好将note分解为单独的<p>元素。这是您可以执行的操作：

const splitNote = this.state.note.split('\n').map(e => <p>{ e }</p>);

您还可以将note分成<span>个元素，然后将它们与<div>一起放在{display: flex; flex-flow: column;}中。由你决定。

注意：

如果由于某种原因而将您的'\n'字符删除了，并且没有合理的方法来停止此操作，则可以在替换发生之前用'\n'替换'\\n'。但是我不认为这是可能的情况。

Answer 2

结果证明我可以使用encodeURI(this.state.note)。因为我的最终目标是将其传递到mailto:链接，所以编码后的return语句可以完美地转换为％0A。