需要帮助将信息推送到 Ref

Question

我得到了一些关于 useRef 的建议，以停止通过在我的 textarea 中输入而触发的连续 api 调用，但现在的问题是我不太了解 useRef 并且不知道如何将我输入的数据推送到 ref。我将 event.target.value 用于 handleChange 函数，想知道我是否必须在这里做同样的事情。

代码：https://codesandbox.io/s/unruffled-moser-ldiw9?file=/src/components/ConvertPlaces.js

Answer 1

您不必编写复杂的逻辑来实现这一点。这是我通常做的事情。

function MyComponent() {
  const timeout = useRef(null);

  function onChange(e) {
    const value = e.target.value;

    clearTimeout(timeout.current);
    timeout.current = setTimeout(() => {
      // do expensive stuff here
    }, 500);
  }

  return (
    <input onChange={onChange} placeholder="Type something.." />
  );
}

这是做什么的？如果用户没有输入 500 毫秒，它只会做昂贵的事情。您应该测试不同的超时值，以找到响应能力和效率之间的完美平衡。