Reagisce sulla riga di visualizzazione della zona di testo salvata

Question

utilizzando Facebook React. In una pagina delle impostazioni, ho un multilinea textarea in cui un utente può immettere testo multilinea (nel mio caso, un indirizzo).

<textarea value={address} /> 

Quando provo a visualizzare l'indirizzo, in modo da qualcosa come {address}, che non mostra le interruzioni di riga ed è tutto su una riga.

<p>{address}</p> 

Qualche idea su come risolvere questo problema?

Answer 1

Non c'è motivo di usare JS. Si può facilmente dire al browser come gestire nuova riga utilizzando la proprietà white-space CSS:

white-space: pre-line; 

pre-line

sequenze di spazi bianchi sono crollati. Le righe sono interrotte a caratteri di nuova riga, a <br> e, se necessario, per riempire le caselle di riga.

Partenza questa 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

Questo è prevedibile, si avrebbe bisogno di convertire i caratteri nuova riga (\ n) per linea di codice HTML interruzioni

Un articolo su come utilizzare in reagiscono: https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw

Per citare l'articolo:

Perché si sa che tutto in Reagire è funzioni, non si può davvero fare questo

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

si nce che restituirebbe una stringa con nodi DOM all'interno, che non è consentita, perché deve essere solo una stringa.

È quindi possibile provare fare qualcosa di simile:

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

non consentito o perché ancora una volta è Reagire funzioni pure e due le funzioni possono essere uno accanto all'altro.

tldr. Soluzione

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

Ora stiamo avvolgendo ogni linea-break in un arco, e che funziona bene perché arco offre visualizzazione in linea. Ora abbiamo una soluzione nl2br line-break funzionante

Answer 3

La soluzione è quella di impostare la proprietà white-space sull'elemento che visualizza il contenuto del tuo textarea:

white-space: pre-line;