如何在不使用value属性的情况下清空React中的TextInput输入框

可行实现思路 #

以下方案均不会破坏你现有防抖优化、不引入额外输入时的重渲染开销：

• 方案1：操作非受控组件Ref（推荐，性能开销最小）
  你当前使用defaultValue属于React非受控组件模式，直接通过Ref操作输入框DOM即可手动修改显示值，完全不会触发组件重渲染。
  实现步骤：

1. 为每个TextField声明Ref绑定

const bizMsgIdrInputRef = React.useRef<HTMLInputElement>(null);

2. 给TextField组件添加ref属性

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

3. 清空按钮点击逻辑中同时更新DOM值和Redux状态

const handleClear = () => {
  // 清空输入框显示内容
  if (bizMsgIdrInputRef.current) {
    bizMsgIdrInputRef.current.value = '';
  }
  // 同步更新Redux存储值，保证后续逻辑取值正确
  dispatch(setBizMsgIdrValueReducer(''));
  // 其余输入框按照相同逻辑操作即可
}

• 方案2：更新容器key触发重渲染（适合输入框数量多的场景）
  如果页面上TextField数量较多，逐个绑定Ref成本高，可以给Filter组件外层容器绑定动态key，清空时更新key值让React卸载重渲染整个Filter模块，所有输入框会自动读取更新后的defaultValue。
  实现步骤：

1. 给Filter组件声明key状态

const [filterRefreshKey, setFilterRefreshKey] = React.useState(0);

2. Filter组件最外层容器绑定key

<div key={filterRefreshKey}>
  {/* 所有TextField组件放这里 */}
</div>

3. 清空按钮点击逻辑

const handleClear = () => {
  // 先更新Redux中所有过滤字段的值为空
  dispatch(clearAllFilterValue());
  // 更新key触发容器重渲染，所有输入框自动读取最新的defaultValue
  setFilterRefreshKey(prev => prev + 1);
}

注意事项 #

需要给你的防抖函数添加取消方法，避免用户输入后立刻点击清空，未执行的防抖回调把旧值重新更新到Redux中：

const debounce = (func, delay) => {
    let debounceTimer;
    const debounced = function () {
        const context = this;
        const args = arguments;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => func.apply(context, args), delay);
    }
    // 新增取消方法
    debounced.cancel = () => clearTimeout(debounceTimer);
    return debounced;
}

清空时调用防抖函数的cancel方法即可：

optimisedOnChangeBizMsgIdrValue.cancel();

可选优化方向 #

你提到的绑定value后输入有5秒延迟，本质是组件重渲染范围过大导致的，可通过React.memo包裹输入框组件、拆分Redux订阅粒度优化，后续如果需要扩展输入框相关功能，可以考虑改造为受控组件模式，维护成本更低。

内容的提问来源于stack exchange，提问作者egemenakturk