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

Question

我没有使用 value 来在每次用户按键时不渲染。所以我的程序是这样的

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'}} />

所以我想添加清除按钮来清除过滤器组件中的所有文本字段，因为我在文本字段上没有值，如果不关闭模式我无法清除。是的，如果我关闭模式并重新打开，它将被清除，但我想在不关闭的情况下实现这一点，所以有什么想法吗？如果您想了解更多关于代码的信息，我可以分享更多信息（注意：使用 debounce 而不使用 value 的原因是 Speed，否则当用户键入时屏幕上有 5 秒延迟）。

Answer 1

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

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

试试这样的：

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'}} />