从保存的textarea中反映显示行中断

Question

使用Facebook React.在设置页面中,我有一条多行textarea,用户可以在其中输入多行文字(在我的例子中是一个地址).

<textarea value={address} />

当我尝试显示地址时,就像{address}它一样,它没有显示换行符,而且都在一行上.

<p>{address}</p>

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

Answer 1

没有理由使用JS.您可以使用white-spaceCSS属性轻松告诉浏览器如何处理换行符:

white-space: pre-line;

前行

空白的序列被折叠.线条在换行字符,at处<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>

Answer 2

这是预期的,您需要将新行(\n)字符转换为HTML换行符

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

引用文章:

因为你知道React中的所有东西都是函数,所以你不能真正做到这一点

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

因为那将返回一个内部有DOM节点的字符串,这也是不允许的,因为它必须只是一个字符串.

然后你可以尝试做这样的事情:

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

这是不允许的,因为React是纯函数,两个函数可以彼此相邻.

tldr.解

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

现在我们在一个范围内包装每个换行符,这样可以正常工作,因为span的内联显示.现在我们得到了一个有效的nl2br换行解决方案

Answer 3

解决方案是white-space在显示您的内容的元素上设置属性textarea：

white-space: pre-line;