Мне нужен текст, который вводится в TextArea в том же формате

Я использую TextArea из AntDesign, когда я ввожу в него, скажем, 2-3 абзаца и нажимаю Enter, чтобы отобразить его в строке, но он отображает все в одном абзаце. Я хочу точное форматирование, которое я сделал при вводе в текстовую область. Как это сделать?

Я просто использую текстовую область -

  <TextArea
     rows={2}
     style={{ width: "100%" }}
     defaultValue={this.state.value}
     onClick={this.handleValue}
  />

и отображать на правой стороне-

  <div>{this.state.value}</div>

ОЖИДАЛ

Hey, how are you doing today? I am fine. i hope your are fine

do give me a call when you are free.

contact - 1234567890

ЧТО Я ПОЛУЧАЮ В РЕЗУЛЬТАТЕ

Hey, how are you doing today? I am fine. i hope your are fine do give me a call when you are free. contact - 1234567890

reactjs html antd ant-design-pro
person Rahul Syal    schedule 31.07.2019    source источник
comment
это просто TextArea, который я использую... я добавил это выше @Peter   -  person Rahul Syal    schedule 31.07.2019
comment
вам нужна дополнительная помощь с этим вопросом? Пожалуйста, дайте мне знать или отметьте мой ответ как принятый. Спасибо.   -  person Peter    schedule 31.07.2019

Ответы (5)


arrow_upward
3
arrow_downward

Вы можете использовать тег pre для отображения введенного содержимого.

Я создал следующий пример, используя vanilla JS. Вы можете реализовать то же самое в react.

<textarea id="tarea" rows="2" style="width: 100%" onclick="handleValue()">
</textarea>
<p id="display"></p>
<script>
  function handleValue() {
    var tarea = document.getElementById('tarea');
    var disp = document.getElementById('display');
    disp.innerHTML = '<pre>' + tarea.value + '</pre>';
  }
</script>

Например:

<pre>{this.state.value}</pre> должно помочь.

Надеюсь это поможет! Ваше здоровье.

person AdityaSrivast    schedule 31.07.2019

arrow_upward
1
arrow_downward

Поэтому я не думаю, что есть простой способ сделать это (даже если способ сделать это не так сложно).

Что вам нужно сделать, так это получить каждую строку TextArea, вы сможете получить это примерно так:

var textArea = document.getElementById("my-text-area");
var arrayOfLines = textArea.value.split("\n");

Источник: https://stackoverflow.com/questions/9196954/how-to-read-line-by-line-of-a-text-area-html-tag

Когда у вас есть arrayOfLines, вы можете вывести текст, как если бы он был набран с помощью небольшого цикла for().

person Trisma    schedule 31.07.2019
comment
Не массив, для этого мне тоже нужно изменить бэкэнд - person Rahul Syal; 31.07.2019

arrow_upward
1
arrow_downward

Ниже приведены два варианта выполнения этой задачи:

  1. При нажатии клавиши «Enter» добавьте к строке символ новой строки. При отображении текста разделяйте на новую строку. Пример CodeSandbox, слушайте код ключа
function App() {
  const [text, setText] = React.useState("");

  function handleChange(e) {
    if (e.key === "Enter") {
      setText(`${e.target.value}\n`);
    }
    setText(e.target.value);
  }

  return (
    <div>
      <TextArea
        rows={4}
        value={text}
        onChange={handleChange}
        onPressEnter={handleChange}
      />

      {text.length > 0 && text.split("\n").map((l, i) => <p key={i}>{l}</p>)}
    </div>
  );
}
  1. Используйте HTML-тег pre. Это просто, однако по умолчанию текст отображается как моноширинный шрифт. Пример CodeSandbox с использованием тега pre
function App() {
  const [text, setText] = React.useState("");

  function handleChange(e) {
    setText(e.target.value);
  }

  return (
    <div>
      <TextArea
        rows={4}
        value={text}
        onChange={handleChange}
        onPressEnter={handleChange}
      />

      <pre>{text}</pre>
    </div>
  );
}
person Peter    schedule 31.07.2019

arrow_upward
1
arrow_downward

Как сказал Адитья Шриваст, вы можете использовать предварительные теги. Но чтобы обернуть текст, вы должны добавить ниже CSS.

<style>
     pre {
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
     }
  </style>

В противном случае тексты будут отображаться одной строкой.

person Kasun Sampath Weligamage    schedule 07.09.2020

arrow_upward
0
arrow_downward

На мой взгляд, проблема в style={{ width: "100%" }}. Попробуйте ограничить ширину TextAreas. Например: style={{ width: "100px" }}

person aslantorret    schedule 31.07.2019