Firebase Firestore не получает входов / возвратов в базу данных с пользовательским интерфейсом материала и реагирует

Question

Мой код отлично работает, но когда я набираю «текстовое поле пользовательского интерфейса материала» и пытаюсь установить документ в Firestone, он не включает никаких возвратов. Весь документ представляет собой одну большую строку без каких-либо разделений.

Это действительно затрудняет использование в базе данных.

также было бы полезно знать, как разместить «входы» в базе данных. база данных через comsole firebase *

Соответствующие биты кода

Текстовое поле

  import TextField from '@material-ui/core/TextField';

<form onSubmit={this.submit}>
    <TextField  
      className={Style.TextField}
      multiline
      rows="9"
      size="small" variant="filled" 
value= {this.state.Bio}
onChange= {this.BioChange}/>

Функция для отправки формы.

submit = event => 
{
     event.preventDefault();         

   let  db = firebase.firestore();
    db.collection("Bio").doc(`${firebase.auth().currentUser.email}`).set({  
    Bio: `${this.state.Bio}`,
   });
}

например, если я ввожу в текстовое поле и отправляю

«Сколько строк я могу отправить?

возможно 1

может быть 3»

it будет выглядеть как:

"" Как много строк я отправляю? возможно 1, может быть, 3 "

Answer 1

Вы можете сделать это с помощью регулярных выражений.
Сначала замените разрывы строк на '\ n' в вашем значении textarea.

inputValue.replace(/\n/g, "\\n");

теперь отправьте это новое значение в firestore.
Чтобы снова отобразить значение, выполните процедуру в обратном порядке.

receivedValue.replace(/\\n/g, "\n");

пример

Answer 2

Добавление к приведенному выше ответу. Если у вас есть что-то с «ключами возврата» даже в вашем состоянии, вам нужно будет добавить

<div style = {{ whiteSpace: 'pre-line'}}

, этот литерал шаблона необходим для того, чтобы вы имели ключи возврата в вашем HTML. В противном случае они будут автоматически заменены пробелами.