如何在不使用值的情况下清除TextInput

Question

每次用户按下键时，我都不会使用值进行渲染。所以我的程序看起来像这个

const debounce = (func, delay) => {
let debounceTimer;
return function () {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer =
setTimeout(() => func.apply(context, args), delay);
}
}
const onChangeBizMsgIdrValue = React.useCallback(
(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
dispatch(setBizMsgIdrValueReducer(newValue || ''));
},
[],
);
const optimisedOnChangeBizMsgIdrValue = debounce(onChangeBizMsgIdrValue,500);

我的TextInput看起来像这个

<TextField defaultValue={BizMsgIdrValueRedux} onChange={optimisedOnChangeBizMsgIdrValue} style={{width: '130px'}} />

所以我想添加Clear按钮来清除Filter Component中的所有TextFields，因为我在TextFields上没有值，如果不关闭模态，我就无法清除。是的，如果我关闭模态并重新打开，它将被清除，但我想在不关闭的情况下实现这一点，有什么想法吗？如果你想了解更多关于代码的信息，我可以分享更多(注意：使用去抖动而不使用值的原因是速度，否则当用户键入时，屏幕上会有5秒的延迟(。

Answer 1

简而言之，对于您想要实现的目标，有一个更好的解决方案；如果你想以程序的方式清除"0"中的一个输入；反应"；您需要控制输入的方式。

大概你不想这么做的原因是，每次你按下一个键，你都在等待500毫秒的输入改变，我以前也遇到过同样的情况，更好的解决方案是创建一个handleChange函数，然后在状态改变时调用它，然后触发你的去抖动函数。

试试这样的东西：

const [textValue, setTextValue] = useState("");
const debounce = (func, delay) => {
let debounceTimer;
return function () {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer =
setTimeout(() => func.apply(context, args), delay);
}
}
const onChangeBizMsgIdrValue = React.useCallback() => {
dispatch(setBizMsgIdrValueReducer(textValue));
},
[],
);
const handleChange = (e) => {
setTextValue(e.target.value)
optimisedOnChangeBizMsgIdrValue()
}
const optimisedOnChangeBizMsgIdrValue = debounce(onChangeBizMsgIdrValue,500);

<TextField value={BizMsgIdrValueRedux} onChange={handleChange} style={{width: '130px'}} />