如何让textarea中输入多行的数据在p标签中换行?
来源:互联网 发布:插补算法分为几种 编辑:程序博客网 时间:2024/06/05 00:55
我们在用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渲染的效果如下:
阅读全文
2 0
- 如何让textarea中输入多行的数据在p标签中换行?
- HTML中textarea标签的换行方法
- HTML中textarea标签的换行方法
- HTML中textarea标签的换行方法
- 如何在.cs代码中获取textarea标签的值?
- 关于在textarea中输入回车换行和空格字符的正常显示
- 如何在RowEditing中使用TextArea时回车可以换行
- <textarea>标签中换行符号“
“
- 如何在<textarea>标签中消除HTML标签!
- php中如何把多行文本框textarea提交上来的数据按照回车换行拆分成数组
- php 变量在前台html 的textarea 中如何换行,以及换行修改如何在PHP后台获取
- 在输入中如何忽略换行字符
- 在 Textarea 中输入制表符
- 在EasyUI中设置TextArea的自动换行
- textarea数据中有<br/>换行
- HTML中P标签自动换行,浏览器补全P标签时的问题
- JS控制在textarea中换行
- freemarker在textarea中正确显示换行
- struts国际化
- Eclipse创建Maven Web项目
- 显式锁(三) -- 读写锁ReadWriteLock
- 吸血鬼数(Java实现)
- 整型反转
- 如何让textarea中输入多行的数据在p标签中换行?
- Python-json
- 关于虚拟化(virtualization)的一些知识
- FFmpeg之AVCodec
- IntentFilter的匹配规则
- 机器学习&数据挖掘入门1--环境搭建
- Javaoop2
- Github+Hexo搭建个人Blog
- Django:第一个网站框架