如何在React Final Form中使用带initialValue的debounce

Question

我需要在输入onChange上使用debounce，但我也需要表单的initialValues中的值。在使用value={props.value}添加去抖动时，键入时文本框中没有发生任何事情，这是由于props.value在去抖动计时器后得到更新。但解决这个问题的办法是什么？

const debounced = debounce(e => {
input.onChange(e);
}, 500);
<FormControl
value={input.value}
onChange={e => {
e.persist();
debounced(e);
}}
/>

在上述情况下，在输入框中不会键入任何内容。如果我不传递value道具，我就不会在输入框中自动填充现有值。

我很乐意得到如何实现这一目标的建议。

提前感谢！

Answer 1

以下内容应该会取消对输入的抖动并相应地更新状态。

const { useState } = React;
const debounce = (callback, wait) => {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
const App = () => {
const [current, setCurrent] = useState('');

const handleChange = debounce(e => setCurrent(e.target.value), 500);

return (
<div>
<form>
<input type="text" onChange={handleChange} />
<p>{current}</p>
</form>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>