Question

我基于以下内容创建了一个新的Debounce输入组件 React hook debounce

export const DebouncedTextHooks = props => {
  const { id, debounceTime, onChange, value, ...other } = props;

  const [event, setEvent] = useState(null);
  const [text, setText] = useState("");

  const emitChange = e => {
    props.onChange(e);
  };

  const debounced = useRef(
    debounce(t => {
      emitChange(t);
    }, debounceTime)
  );

  useEffect(() => debounced.current(event), [event]);

  useEffect(() => {
    setText(value);
    setEvent(null);
  }, [value]);

  const handleChange = e => {
    e.persist();
    const { value } = e.target;
    setEvent(e);
    setText(value);
  };

  return <input id={id} value={text} onChange={handleChange} {...other} />;
};

function App() {
  const [debHook, setDebHook] = useState("");

  const onDebounce = e => {
    const { value, name } = e.target;
    switch (name) {
      case "debHook":
        setDebHook(value + "-added");
        break;
    }
  };

  const reset = () => {
    setDebHook("");
    setDeb("");
  };

  return (
    <div className="App">
      <DebouncedTextHooks
        id={"debHook"}
        name={"debHook"}
        value={debHook}
        debounceTime={500}
        onChange={onDebounce}
        labelText={""}
      />

      <button onClick={reset}>RESET</button>

      <p>DB Text={debHook}</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

去抖部分效果很好，我是一个快乐的露营者。当我想重置其值（内部也是）时，问题就开始了。起初[value]是“”，当我开始键入时，该回调尚未调用，因此[value]仍是“”，这是内部文本更改时的情况。

如果在此状态下，我单击“重置”按钮，它将尝试将[value]更改为“”，并且由于去抖组件中的当前值为“”，因此不会调用setEffect。

如何确保重置防抖组件内部状态？

这里是codesandbox.io to explain！

React钩子反跳输入，并重置子元素

0 个答案: