Reagiere Display-Zeilenumbrüche aus dem gespeicherten Textfeld

Question

Mit Facebook React. Auf einer Einstellungsseite habe ich eine mehrzeilige textarea, wo ein Benutzer mehrzeiligen Text (in meinem Fall eine Adresse) eingeben kann.

<textarea value={address} /> 

Wenn ich versuche, die Adresse angezeigt werden, so etwas wie {address}, ist es nicht die Zeilenumbrüche zeigen und ist alles auf einer Linie.

<p>{address}</p> 

Irgendwelche Ideen, um das zu lösen?

Answer 1

Es gibt keinen Grund, JS zu verwenden. Sie können den Browser einfach sagen, wie Newline zu handhaben die white-space CSS-Eigenschaft mit:

white-space: pre-line; 

pre-line

Sequenzen von Leerzeichen zusammengeschoben werden. Die Zeilen werden unter Newline-Zeichen, unter <br> und nach Bedarf zum Füllen von Zeilenfeldern unterbrochen.

Schauen Sie sich diese Demo:

<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

Dies ist zu erwarten, um die neue Zeile (\ n) Zeichen HTML-Zeilenumbrüche

Ein Artikel über die Verwendung in konvertieren müssten reagieren: https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw

Artikel zitieren:

Weil Sie wissen, dass alles in React ist Funktionen, kann man nicht wirklich das tun

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

Si nce, die einen String mit DOM-Knoten zurückgibt, der auch nicht erlaubt ist, weil er nur eine Zeichenkette sein muss.

Sie können dann versuchen, so etwas wie dies tun:

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

das auch nicht, weil wieder erlaubt ist, Reagieren reine Funktionen ist und zwei Funktionen können nebeneinander sein.

tldr.

Lösung

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

Jetzt sind wir jeden Zeilenumbruch in einer Spanne Einwickeln, und das funktioniert gut, weil Spanne Display inline hat. Jetzt haben wir eine funktionierende nl2br Zeilenumbruch-Lösung

Answer 3

Die Lösung ist die Eigenschaft white-space auf das Element, um den Inhalt Ihrer textarea Anzeige:

white-space: pre-line;