javascript - 使用 REACT 可视化文本区域中的 onkeypress 换行符

Question

用正确分配的换行符来可视化在 textarea 元素内创建的文本的有效方法是什么？

只要我按 Enter 键输入一个换行符，我就可以看到它在文本区域内正确显示，但是当我在另一个元素中可视化输出时，换行符显示为一个空格。数据也保存在我的数据库中，没有任何换行符。

我已将示例代码附加到以下链接: https://codesandbox.io/s/busy-hodgkin-1oujz?file=/src/App.js

Answer 1

最简单的方法是通过 CSS，方法如下:

...
<div className="App">
  <div className="wrapper">
    <div>
      <p class='formatted'>{text}</p>
    </div>
...

然后:.formatted { white-space: pre; }

另一种方法是使用 dangerouslySetInnerHTML:

...
<div className="wrapper">
  <div>
    <p
      dangerouslySetInnerHTML={{
        __html: formattedText,
      }}>
    </p>
  </div>
...

处理的逻辑是:

const [text, setText] = useState('');
const [formattedText, setFormattedText] = useState(text);

const handleTextInput = ({ target }) => {
  const { value } = target;
  const formattedValue = value.replace(/\n/g, '<br />');

  setText(value);
  setFormattedText(formattedValue);
};