reactjs - 如何通过输入 ReactJS 中的单词进行检测

Question

正常情况下，输入有一个 onChange 事件来检测更改(但按字符)

const handleChange = event => {
    setInputValue(event.target.value);
    //When typing "asking" => would be "a" "as" "ask", ....
  };

所以我想做的是，当通过硬件设备将条形码扫描到输入中时，只有在完全扫描了单词后才调用服务器的操作。这里的问题是它逐个字符地监听输入变化

React.useEffect(() => {
    if (!!inputValue.length) {
      handleScan();
    }
  }, [inputValue]);

这些代码将对输入中输入的每个字符调用handleScan，最终会多次调用handleScan()。我希望打一次电话

有没有办法等待一段时间，直到输入完全有一个单词(例如:“BarCode”)，然后执行操作？

如有任何帮助，我们将不胜感激。

Answer 1

您可以利用 use-debounce Hook 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]);