我想要以相同格式在 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

所以我不认为有一个简单的方法来做到这一点（即使这样做的方法不是那么难）。

你需要做的是获取 TextArea 的每一行，你应该可以通过这样的方式获取它：

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

来源：

一旦你有了 arrayOfLines，你就可以输出文本，就像用 for() 循环输入一样。

Answer 2

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

Answer 3

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

希望对您有所帮助！干杯。

Answer 4

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

在按键 "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>
  );
}

Answer 5

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

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

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

I want the text that is input in TextArea in same format

html

reactjs

antd

ant-design-pro