javascript - 如何去除 Formik Field ReactJS 的抖动

Question

我想去抖动 Formik <Field/>但是当我在字段中输入时，似乎去抖不起作用。我也试过 lodash.debounce、throttle-debounce 和相同的结果。如何解决？

代码沙箱 - https://codesandbox.io/s/priceless-nobel-7p6nt

片段:

import ReactDOM from "react-dom";
import { withFormik, Field, Form } from "formik";

const App = ({ setFieldValue }) => {
  let timeout;
  const [text, setText] = useState("");

  const onChange = text => {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => setText(text), 750);
  };

  return (
    <Form>
      <Field
        type="text"
        name="textField"
        placeholder="Type something..."
        onChange={e => {
          onChange(e.target.value);
          setFieldValue("textField", e.target.value);
        }}
        style={{ width: "100%" }}
      />
      <br />
      <br />
      <div>output: {text}</div>
    </Form>
  );
};

const Enhanced = withFormik({
  mapPropsToValues: () => ({
    textField: ""
  }),
  handleSubmit: (values, { setSubmitting }) => {
    setSubmitting(false);
    return false;
  }
})(App);

ReactDOM.render(<Enhanced />, document.getElementById("root"));

Answer 1

  const [text, setText] = useState("");
  const [t, setT] = useState(null);

  const onChange = text => {
    if (t) clearTimeout(t);
    setT(setTimeout(() => setText(text), 750));
  };