如何解决如何通过输入ReactJS中的单词进行检测
通常,输入有一个 if (command == "poll"){
if (!args[0]) return msg.channel.send('what poll do you want to make');
let pollq = args.join(" ")
let whoask = msg.author.username
var poll = new D.MessageEmbed()
.setTitle('New Poll')
.addField(`${whoask} just made an new poll`,`${pollq}`)
.addField(` ? `,'to agree')
.addField(` ? `,'to disagree')
.setTimestamp()
if(Sadmin) {
if (args[0] == "stop"){
const c1 = await send.react(':thumbsup:')
const c1c = c1.count
msg.channel.send(c1c)
}else {
var send = await msg.channel.send(poll)
await send.react(':thumbsup:')
await send.react(':thumbsdown:')
await send.delete
}
}else {
msg.delete({ timeout: 5000 })
msg.channel.send(adminprev).then(adminprev => adminprev.delete({ timeout: 5000 }))
}
}
事件来检测变化(但按字符)
onChange
因此,我要做的是通过硬件设备将条形码扫描到输入中,然后仅在完全扫描单词后才对服务器调用操作。这里的问题是它逐个字符地听输入的更改
const handleChange = event => {
setInputValue(event.target.value);
//When typing "asking" => would be "a" "as" "ask",....
};
这些代码将在输入中键入的每个字符上调用React.useEffect(() => {
if (!!inputValue.length) {
handleScan();
}
},[inputValue]);
,最终将导致多次调用handleScan
。我希望打一次电话
有什么办法等到输入完全有一个单词(例如:“条形码”),然后执行操作?
任何帮助将不胜感激。
解决方法
您可以使用use-debounce
钩子npm软件包。
import useDebounce from 'use-debounce'
const [inputValue,setInputValue] = useState('Hello');
// don't update until a second passes
const [debouncedValue] = useDebounce(inputValue,1000);
const handleChange = event => {
setInputValue(event.target.value);
//When typing "asking" => would be "a" "as" "ask",....
};
React.useEffect(() => {
if (!! debouncedValue.length) {
handleScan();
}
},[debouncedValue]);
,
您应该实现去抖概念,以避免不必要的API调用。
反跳
JavaScript中的反跳是用于提高浏览器性能的一种做法。网页上可能有一些功能需要耗时的计算。如果经常调用这种方法,则可能会极大地影响浏览器的性能,因为JavaScript是一种单线程语言。防弹跳是一种编程实践,用于确保耗时的任务不会频繁触发,从而使网页的性能停滞。
换句话说,它限制了调用函数的速率。
您可以遵循使用npm软件包还是创建自己的自定义防跳功能的概念。
为了更好地理解,您可以参考debounce in React.js,其中有不错的定义和示例。
用户经过一段时间(例如1000秒)后进行API调用 停止输入以避免重复调用API。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。