Реагирует на отладку ввода отказов и сброс дочернего элемента - PullRequest
Новая
       25

Реагирует на отладку ввода отказов и сброс дочернего элемента

0 голосов
/ 07 мая 2019

Я создал новый компонент ввода Debounce, основанный на Отладка React-хука 

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);

Компонент debounce работает хорошо, и я счастливый участник.Проблема начинается, когда я хочу сбросить ее значение (внутреннее тоже).Сначала [значение] равно "", и когда я начинаю печатать, обратный вызов еще не вызывается, поэтому [значение] все еще "", это правда, пока внутренний текст изменяется.

Если в этом состоянии,Я нажимаю кнопку сброса, он пытается изменить [значение] на "", и, поскольку текущее значение равно "" в компоненте debounce, он не будет вызывать setEffect.

Как убедиться, чтосбросить внутреннее состояние компонента debounce?

Вот codesandbox.io, чтобы объяснить !

...