How to clear TextInput without using value - reactjs

Question

I am not using value to not render everytime user hit a key. So my program looks like this
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);
and my TextInput looks like this
<TextField defaultValue={BizMsgIdrValueRedux} onChange={optimisedOnChangeBizMsgIdrValue} style={{width: '130px'}} />
so I want to add Clear button to clear all the TextFields in Filter Component since I dont have value on TextFields i can not clear without closing the modal. Yes if i close the modal and reOpen it will be cleared but i want to achive this without closing so any ideas? I can share more if you want more about the code (NOTE: The reason of using debounce and not using value is Speed otherwise when user types there is 5 sec delay on the screen).

Answer 1

There is a better solution for what you want to achieve, in short; if you want to programatically clear an input in a "react" way you would need to make that input controlled.
Presumably the reason you don't want to do that is because everytime you press a key you are waiting 500ms for the input to change, I have been in your exact same situation before and the better solution is to create a handleChange function and then call that with your state change and then trigger your debounce function.
Try something like this:
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'}} />