将 SanitizeFunction 与 React textArea onPaste 集成答案

【问题标题】：Integrate SanitizeFunction with React textArea onPaste将 SanitizeFunction 与 React textArea onPaste 集成
【发布时间】：2021-07-23 16:07:37
【问题描述】：

用例：

我有一个用例，用户可以粘贴以下内容之一 textArea 中的字符串，并且必须格式化为新行：

逗号空格（例如：12、2、3）

逗号换行符（例如：12，\n2，\n3，\n）

换行符（例如：12\n2\n3\n）

我正在尝试使用 onPaste functionality，但不确定如何将此用例与 React textarea onPaste 集成

我有这个清理工具，它接受粘贴输入（字符串）并返回一个数组

function sanatizeToArray(str){
    str=str || "";
    str = str.replaceAll(" ",""); // get rid of spaces!
    str = str.replaceAll("\n",","); // change new lines into commas
    str = str.replaceAll(",,",","); // get rid of duplicates
    return str.split(","); // break it down!
}

sanatizeToArray("12, 2, 3"); // Prints ["12", "2", "3"]
sanatizeToArray("12,\n2,\n3,\n"); // Prints ["12", "2", "3", ""]
sanatizeToArray("12\n2\n3\n"); // Prints ["12", "2", "3", ""]

如果有人可以帮助将此 sanitizeArray 函数与 onPaste 集成，我将不胜感激。

【问题讨论】：

到目前为止，您有哪些代码可以将其用于您的 textarea？另外，为什么不直接使用onChange？
@JoelRummel 这是我到目前为止的代码。我需要使用onPaste 因为用户应该复制粘贴以下三种格式之一：codesandbox.io/s/money-input-example-forked-vsom5?file=/src/… 第一个有效，但是第二个和第三个无效.. 但是如果我在控制台中运行，该实用程序似乎工作正常个人:(
该代码适用于所有用例。你到底是什么问题？
如果你去codesandbox，复制粘贴第二个和第三个用例，它不会在新行中打印正确的值。（我称之为清理函数，获取结果并在新行中打印）。感谢@JoelRummel 的所有帮助，我会支持你的回答。
当您将第二个用例复制粘贴到文本区域时，您还可以看到\n（这不是预期的：（不知道发生了什么。

标签： javascript reactjs textarea

【解决方案1】：

根据您在 cmets 中提供的代码示例，您的 onPaste 集成运行良好。您的 sanitize 功能也可以正常工作，具体取决于您要执行的操作。

在文本区域中直接键入\n 与键入实际换行符不同，因为在文本区域中输入时\n 会自动转义为\\n。这意味着像Hello\nWorld\n! 这样的字符串将被处理为Hello\\nWorld\\n!，而您的replaceAll 调用将无法找到任何换行符。

如果您想测试将实际换行符粘贴到您的输入中（这是最有可能的输入），然后复制粘贴此块，您会发现您的代码运行良好：

12
2
3

如果您也想替换转义的换行符，那么您只需要添加一个额外的replaceAll 调用：

str = str.replaceAll("\\n", ",");

虽然我怀疑这是必要的。

【讨论】：

你太棒了乔尔！