如何让textarea中输入多行的数据在p标签中换行?

原创 2017年11月13日 23:32:28

我们在用React开发Web项目的过程中,有的时候,我们需要把textarea中输入的多行字符串,在其他的标签中输出来,比如p标签。但是,往往这个时候,在p标签中输出的内容其默认情况下是不换行的。比如下面的代码:

import React,{Component} from 'react';
export default class HelloWorld extends Component{

  constructor(){
    super(...arguments);
    this.state={
      note:"",
    }
  }

  render(){
    return(
    <div className="app" style={{padding:"10px 5px 15px 20px"}}>
          <form id="noter-save-form" method="POST" style={{topPadding:"100px",leftPadding:"100px"}}>
              <textarea id="noter-text-area" style={{height:"100px"}} name="textarea" onChange={(e)=> this.setState({note:e.target.value}) } ></textarea>
              <hr/>
              <label>The input value for Note:</label>
              <hr/>
              <p>{this.state.note}</p>
              <hr/>
           </form>
    </div>
  );
  }
}

下面是其渲染的结果:
这里写图片描述

我们可以看出,其在TextArea中输入的回车换行,在p标签中,压根显示不出来。
那么这个时候,我们应该怎么办?其实解决的方案很简单,代码入下:

import React,{Component} from 'react';
export default class HelloWorld extends Component{

  constructor(){
    super(...arguments);
    this.state={
      note:"",
    }
  }

  render(){
    return(
    <div className="app" style={{padding:"10px 5px 15px 20px"}}>
          <form id="noter-save-form" method="POST" style={{topPadding:"100px",leftPadding:"100px"}}>
              <textarea id="noter-text-area" style={{height:"100px"}} name="textarea" onChange={(e)=> this.setState({note:e.target.value}) } ></textarea>
              <hr/>
              <label>The input value for Note:</label>
              <hr/>
              <p>
              {this.state.note.split('\n').map(function(item) {
                  return (
                    <span>
                      {item}
                      <br/>
                    </span>
                  )
                })} </p>
              <hr/>
           </form>
    </div>
  );
  }
}

从上面的代码可以看出,我们在p标签中渲染的时候,把textarea中输入的\n
换成了br标签。

 {this.state.note.split('\n').map(function(item) {
                  return (
                    <span>
                      {item}
                      <br/>
                    </span>
                  )
                })} 

换完后,UI渲染的效果如下:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

textarea value显示的值在2个标签中间;

{$rs['pInfo']}
  • qq_34242581
  • qq_34242581
  • 2016年06月20日 13:51
  • 896

div、p、td 的强制不换行及强制换行

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果相同,所以省略...
  • SmallTankPy
  • SmallTankPy
  • 2017年01月12日 14:24
  • 3355

jQuery实现对P标签的操作

注:以下代码均通过W3School在线测试。 根据id获取元素本身(Object对象)的方法: $("#id"); 例如: $(document).ready(function()...
  • ZZY1078689276
  • ZZY1078689276
  • 2015年07月30日 22:22
  • 2743

textarea里显示换行<br>

textarea换行 在easyui中的datagrid中使用行内编辑时textarea的换行保存到mysql数据库为\n 在textarea中输入回车符 在js读取textarea中的值...
  • youyou_yo
  • youyou_yo
  • 2016年08月25日 09:10
  • 4687

textarea标签单行变多行,类似QQ,微信输入框效果

首先先明确下,这种"单行变多行的效果"只能是基于textarea控件!没有之一!绝逼不包括input,它是行内元素,而且必须肯定是单行,先天性"缺陷"。 还有个需要介绍的事件就是onpropertyc...
  • zhanglianchang10
  • zhanglianchang10
  • 2016年09月29日 14:45
  • 289

textarea 标签中placeholder提示信息手动换行(jQuery水印插件watermark.js )

textarea中的placeholder信息有时需要作换行处理,如果利用空格填充让其内容自动换行的话,不大好控制。于是上网百度了一下,用了watermark.js 这个插件。这个插件据说还可以做水印...
  • diu_man
  • diu_man
  • 2017年07月21日 10:21
  • 419

textarea自动换行,且文本框根据输入内容自适应高度

textarea自动换行,且文本框根据输入内容自适应高度。效果如下: 不好的写法: ...
  • Clover139
  • Clover139
  • 2017年10月20日 10:29
  • 800

p标签换行导致的问题

块状元素的宽高问题 p标签的换行问题
  • fhjdzkp
  • fhjdzkp
  • 2018年01月11日 21:37
  • 41

js 特效 html 特效 textarea是否自动换行

  • 2011年06月13日 12:41
  • 10KB
  • 下载

关于Textarea的换行问题

  • 2010年06月14日 11:10
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让textarea中输入多行的数据在p标签中换行?
举报原因:
原因补充:

(最多只允许输入30个字)