javascript - textarea聚焦事件 - textarea value取得



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

Pete先前关于独立组件的建议是一个很好的解决方案,尽管它错过了一件重要的事情。 列表需要 keys 。 我做了一些调整,我的版本(没有控制台警告)如下所示:

<p>
  <NewLineToBr>{address}</NewLineToBr>
</p>

它使用React 16的 Fragments

https://ffff65535.com

使用Facebook React 。 在设置页面中,我有一个多行 textarea ,用户可以在其中输入多行文本(在我的情况下为地址)。

<textarea value={address} />

当我尝试显示地址时,类似 {address} 内容不会显示换行符,而是全部显示在一行上。

<p>{address}</p>

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


从React 16开始,一个组件可以返回一个元素数组,这意味着您可以创建一个这样的组件:

const NewLineToBr = ({ children = '' }) => children.split('\n')
  .reduce((arr, line, index) => arr.concat(
    <Fragment key={index}>
      {line}
      <br />
    </Fragment>,
  ), [])

您可以这样使用:

export default function NewLineToBr({children = ""}){
  return children.split('\n').reduce(function (arr,line) {
    return arr.concat(
      line,
      <br />
    );
  },[]);
}

喜欢webit版本。 我不知道Fragment组件,它是如此有用。 无需使用reduce方法。 地图就足够了。 另外,list确实需要在react中输入键,但是使用迭代方法中的index却是个坏习惯。 eslint会继续警告我,直到出现混乱错误为止。 所以看起来像这样:

const NewLine = ({ children }) =>
   children.split("\n").map(line => (
    <Fragment key={uuidv4()}>
      {line}
      <br />
    </Fragment>
  ));

没有理由使用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>





textarea