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

Posted 2023-02-19

【中文标题】如何在不使用值的情况下清除 TextInput

【英文标题】：How to clear TextInput without using value

【发布时间】：2022-01-12 14:21:12

【问题描述】：

我没有使用 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 秒延迟）。

【问题讨论】：

使用受控组件并不慢，如果使输入受控会使应用程序滞后那么多，那么代码中的其他地方肯定存在问题。您是否尝试对其进行分析？

当然，使用受控组件并不是真正的问题，但它会引发问题。我将这些值传递给这么多组件，这就是为什么受控组件对我来说是个问题。

【参考方案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' />

【讨论】：

这根本不起作用。在前端我看不到我在 redux 状态下输入的内容没有发生任何变化。