所以用户输入标签(如<body>)，函数应该以(</div>)结束。请看下面我的代码
import React, { useState } from "react";
const Text = () => {
const [currentText, setCurrentText] = useState("");
const addClosingTag = (event) => {
// const txtBefore = event.target.value.slice(0, event.target.selectionStart);
const txtBef = currentText.slice(0,currentText.selectionStart);
const txtAft = currentText.slice(currentText.selectionEnd, currentText.length);
const lastString = txtBef.replace(/s+/g, " ").split(" ")[txtBef.replace(/s+/g, " ").split(" ").length - 1];
if (event.key == ">") {
if(lastString.includes("<")){
var addClose = lastString.replace(/[< >]/g, "");
setCurrentText(`${txtBef}</${addClose}>${txtAft}`);
}
}
}
return (
<div>
<textarea
value={currentText}
onChange={(event) => setCurrentText(event.target.value)}
onKeyDown={(event) => addClosingTag(event)}
/>
</div>
)
};
export default Text;
如果not函数不会触发，那就太好了htmltag like:<laptop>
我试图关闭html标签后，他们已经声明，到目前为止，该函数不像预期的那样工作。
我找到了一个解决这个问题的方法。
const Text = () => {
const [currentText, setCurrentText] = useState();
const allHTMLTags = [
"a",
"abbr",
"address",
"area",
"article",
"aside",
"audio",
"b",
"base",
"bdi",
"bdo",
"blockquote",
"body",
"br",
"button",
"canvas",
"caption",
"cite",
"code",
"col",
"colgroup",
"data",
"datalist",
"dd",
"del",
"details",
"dfn",
"dialog",
"div",
"dl",
"dt",
"em",
"embed",
"fieldset",
"figcaption",
"figure",
"footer",
"form",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"head",
"header",
"hgroup",
"hr",
"html",
"i",
"iframe",
"img",
"input",
"ins",
"kbd",
"label",
"legend",
"li",
"link",
"main",
"map",
"mark",
"math",
"menu",
"menuitem",
"meta",
"meter",
"nav",
"noscript",
"object",
"ol",
"optgroup",
"option",
"output",
"p",
"param",
"picture",
"pre",
"progress",
"q",
"rb",
"rp",
"rt",
"rtc",
"ruby",
"s",
"samp",
"script",
"section",
"select",
"slot",
"small",
"source",
"span",
"strong",
"style",
"sub",
"summary",
"sup",
"svg",
"table",
"tbody",
"td",
"template",
"textarea",
"tfoot",
"th",
"thead",
"time",
"title",
"tr",
"track",
"u",
"ul",
"var",
"video",
"wbr"
]
const addClosingTag =(elem, evt) => {
var txtBef = elem.value.slice(0, elem.selectionEnd);
var txtAft = elem.value.slice(elem.selectionEnd, elem.value.lenth);
var lastString = txtBef
.replace(/s+/g, " ")
.split(" ");
lastString = lastString[lastString.length - 1];
if(evt.key == ">" && allHTMLTags.includes(lastString.slice(1, lastString.length - 1))) {
if(lastString.includes("<")){
var addClose = lastString.replace(/[< >]/g, "");
elem.value = `${txtBef} </${addClose}> ${txtAft}`;
elem.selectionEnd = txtBef.length +1;
}
}
}
const showText = () => {
alert(currentText);
setCurrentText("");
}
return (
<div style = {{marging: '100px'}}>
<textarea
style = {{width: "400px", height: "150px"}}
value = {currentText}
onChange = {(event) => setCurrentText(event.target.value)}
onKeyUp = {(event) => addClosingTag(event.target, event)}
/>
<button onClick={showText}> show here </button>
</div>
)
};
export default Text;