如何让textarea中输入多行的数据在p标签中换行?
Posted 朱清云的技术博客
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让textarea中输入多行的数据在p标签中换行?相关的知识,希望对你有一定的参考价值。
我们在用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中输入多行的数据在p标签中换行?的主要内容,如果未能解决你的问题,请参考以下文章