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

【问题标题】：I want the text that is input in TextArea in same format我想要在 TextArea 中以相同格式输入的文本
【发布时间】：2019-12-09 00:49:53
【问题描述】：

我正在使用 AntDesign 的 TextArea，当我在其中输入 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

【问题讨论】：

它只是我正在使用的 TextArea...我在@Peter 上方添加了它
在这个问题上您需要更多帮助吗？请让我知道或将我的答案标记为已接受。谢谢。

标签： html reactjs antd ant-design-pro

【解决方案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> 应该做的伎俩。

希望这会有所帮助！干杯。

【讨论】：

【解决方案2】：

所以我认为没有一种简单的方法可以做到这一点（即使这样做的方法并不难）。

您需要做的是获取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()循环一样。

【讨论】：

不是数组，我也必须为此更改后端

【解决方案3】：

下面提供了此任务的两个选项：

在按键“Enter”时，将换行符附加到该行。显示文本时，在换行符处拆分。 CodeSandbox example, listen for keycode

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>
  );
}

使用pre HTML 标签。这很简单，但是默认情况下它将文本呈现为等宽字体。 CodeSandbox example, using pre tag

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>
  );
}

【讨论】：

【解决方案4】：

正如 AdityaSrivast 所说，您可以使用 pre 标签。但是要包装文本，您应该在 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>

否则，文本将显示为一行。

【讨论】：

【解决方案5】：

在我看来，问题出在style={{ width: "100%" }}。尝试限制 TextAreas 的宽度。例如：style={{ width: "100px" }}

【讨论】：