1

我正在使用 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
4

5 回答 5

5

您可以使用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> 应该做的伎俩。

希望这可以帮助！干杯。

于 2019-07-31T13:43:08.710 回答
1

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

你需要做的是得到每一行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()。

于 2019-07-31T13:31:53.630 回答
1

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

  1. 在按键“Enter”时，将换行符附加到该行。显示文本时，在换行符处拆分。CodeSandbox 示例，监听 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>
  );
}
  1. 使用preHTML 标签。这很简单，但是默认情况下它将文本呈现为等宽字体。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>
  );
}
于 2019-07-31T14:03:19.377 回答
1

正如 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>

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

于 2020-09-07T16:24:44.310 回答
0

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

于 2019-07-31T13:33:02.633 回答