我目前正在使用 freesolo Autocomplete,我的特定用例需要在输入文本后面有逗号或空格时创建标签。自动完成目前在 Enter 事件上创建标签,但我认为自动完成中还没有任何支持在任何其他事件上创建标签的内容。我想知道我是否遗漏了什么,或者如果我没有遗漏,我该如何解决这个问题?
目前,我正在尝试使用 Autocomplete 中的 onInputChange 属性来捕获传入的字符串。我检查该字符串中的逗号和空格,并在成功找到其中一个字符后,我使用一些本机 JS 手动触发 Enter 事件代码。这在某些情况下有效,但并非在所有情况下都有效,并且考虑所有情况变得乏味。这种方法似乎容易出现很多问题,我不相信这是在不同事件上实现标签创建的最佳方式。寻找一些想法。谢谢
onInputChange 属性用法:
<Autocomplete
multiple
freeSolo
filterSelectedOptions
id="auto-complete"
options={foo.map(bar => bar.name)}
ref={autoRef}
onInputChange={(e, value) => {
createTagOnEvent(value);
}}/>
Run Code Online (Sandbox Code Playgroud)
在输入中搜索逗号和空格并手动触发 Enter 事件:
const createTagOnEvent = (bar) => {
if (pattern.test(bar)) {
const ke = new KeyboardEvent("keydown", {bubbles: true, cancelable: true, keyCode: 13});
autoRef.current.dispatchEvent(ke);
}
};
Run Code Online (Sandbox Code Playgroud)