我想要以相同的格式在 TextArea 中输入的文本

Question

我使用的是AntDesign的TextArea，当我在其中输入2-3个段落，然后按回车键将其显示为一行时，它会在一个段落中显示所有内容。我想要我在文本区域中输入时所做的精确格式。怎么做？

我只是使用文本区域 -

  <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

Answer 1

您可以使用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> 应该可以解决问题。

希望这可以帮助！干杯。