将 SanitizeFunction 与 React textArea onPaste 集成

Question

用例：

I have a use case where the User can paste ONE of the following string(s) in textArea and it must be formatted to new Line:

Comma-space (E.g: 12, 2, 3)

Comma-newline (E.g: 12,\n2,\n3,\n)

Newline (E.g: 12\n2\n3\n)

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

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

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 集成，我将不胜感激。

Answer 1

根据您在评论中提供的代码示例，您的 onPaste 集成工作正常。您的清理功能也可以正常工作，具体取决于您要执行的操作。

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

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

12
2
3

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

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

虽然我怀疑这是必要的。

将 SanitizeFunction 与 React textArea onPaste 集成

Integrate SanitizeFunction with React textArea onPaste

javascript

textarea

reactjs