1

I am using TextArea of AntDesign, when I input, say, 2-3 paragraphs in it, and hit enter to display it in a row, but it displays everything in one paragraph. I want the exact formatting that I did while entering in the text area. How to do that?

I am simply using Text area -

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

and to display on right side-

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

EXPECTED

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

WHAT I GET IN RESULT

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

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>

それ以外の場合、テキストは 1 行で表示されます。

于 2020-09-07T16:24:44.310 に答える
1

以下に、このタスクの 2 つのオプションを示します。

  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. preHTML タグを使用します。これは単純ですが、デフォルトでテキストをモノスペース フォントとしてレンダリングします。pre タグを使用した CodeSandbox の例
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 に答える