从保存的文本区域反应显示换行符

问题描述：

使用Facebook React。在设置页面中，我有一个多行textarea用户可以输入多行文本（在我的情况下，地址）。从保存的文本区域反应显示换行符

<textarea value={address} />

当我试图显示地址，所以像{address}，它不显示换行符是所有在一行。

<p>{address}</p>

任何想法如何解决这个问题？

答

没有理由使用JS。您可以轻松地告诉浏览器如何使用white-space CSS属性来处理换行符：

空白的

white-space: pre-line;

前行

序列被倒塌。行在换行符被破坏，在<br>，并根据需要填补线框。

看看这个演示：

<style> 
 
    #p_wrap { 
 
    white-space: pre-line; 
 
    } 
 
</style> 
 

 
<textarea id="textarea"></textarea> 
 
<p id="p_standard"></p> 
 
<hr> 
 
<p id="p_wrap"></p> 
 
<script> 
 
    textarea.addEventListener('keypress', function(e) { 
 
    p_standard.textContent = e.target.value 
 
    p_wrap.textContent = e.target.value 
 
    }) 
 
</script>

我认为这应该是被接受的答案 – bpercevic

最好，最简单的解决方案！ – beydogan

这有多种工作方式：如果您尝试通过变量在JSX中显示换行符（
），它将“安全”地呈现标记而不是添加换行符。在这个CSS中使用转义字符可以解决这个安全机制，并解决这个问题。 – bvoyelr

答

这是可以预料的，你就需要在新行（\ n）的字符转换为HTML换行符

有关在使用它的文章作出反应：https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw

引述文章：

因为你知道，一切都在REACT为功能，你不能真正做到这一点

this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />')

硅nce会返回一个带有DOM节点的字符串，这也是不允许的，因为必须只是一个字符串。

然后，您可以尝试做这样的事情：

{this.props.section.text.split(“\n”).map(function(item) { 
    return (
    {item} 
    <br/> 
) 
})}

这是不允许的，因为无论再做出反应是纯粹的功能，两个功能可以彼此相邻。

tldr。解决方案

{this.props.section.text.split(“\n”).map(function(item) { 
    return (
    <span> 
     {item} 
     <br/> 
    </span> 
) 
})}

现在我们将每个换行符都包装在一个范围内，并且工作正常，因为span具有内联显示。现在我们得到了一个可用的nl2br换行解决方案

谢谢马克，像一个魅力。你有可能把答案放在这里吗？ Stackoverflow不喜欢外部链接（可能会消失，难以查看答案列表......），我会将您的答案标记为正确。 – denislexic

对他人的提示：您还需要为该跨度添加关键属性，因为它处于循环状态。所以它会是'.... map（function（item，i）{return {item}
}）' – denislexic

很好的回答！这对我有帮助。此外，如果您有多行换行符，则可以防止为最后一项渲染多余的'
'：'.... map（function（item，i，arr）{return { item} {arr.length-1 === i？null：
}}）'。注意，我包含'.map（）'的第三个参数' – Lasha

答

解决的办法是设置属性white-space显示您textarea内容的元素：

white-space: pre-line;

从保存的文本区域反应显示换行符

相关推荐