React(Redux)开发Todo应用时添加Todo后输入框无法重置如何解决

问题根因 #

你遇到的问题本质是输入框defaultValue属性的特性限制：defaultValue仅在组件首次渲染时赋值一次，后续关联的状态、变量更新不会同步到输入框内容，这也是你触发handleText重置文本不生效的核心原因。 #

方案1：受控组件模式（推荐，与Redux设计逻辑一致） #

1. 删除输入框的defaultValue配置，将输入框的value属性绑定到Redux Store中存储的待添加Todo文本字段
2. 输入框onChange事件对应触发更新Store中文本字段的Action，保证输入内容和Store状态实时同步
3. 在Reducer的ADD_TODO逻辑分支中，新增将Store内的待添加Todo文本字段重置为空字符串的逻辑即可

方案2：非受控组件模式（适合不想将输入值存入Store的场景） #

1. 通过useRef获取输入框DOM实例：

const inputRef = useRef(null)

2. 给输入框绑定ref属性：

<input ref={inputRef} /* 其他原有配置保持不变 */ />

3. 在添加Todo的逻辑执行完成后，直接手动清空输入框DOM值：

inputRef.current.value = ''

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