React中map渲染的Input清空后自动出现‘false’无法删除问题求助

问题根源 #

你的handleChange函数里的赋值逻辑存在错误：

[e.target.id]: e.target.value || e.target.checked,

当清空文本类型的input（比如task、name这类text/date类型）时，e.target.value会变成空字符串，此时||逻辑会取右侧的e.target.checked值。但文本input的checked属性默认是false，最终这个布尔值会被赋值给对应的state字段，React会自动把布尔值转换成字符串"false"显示在input中。后续再删除时，这个"false"又会被当作有效值，导致无法彻底清空。

而textarea没有这个问题，是因为它的onChange逻辑直接使用e.target.value，没有添加那个错误的|| e.target.checked判断。

修正方案 #

修改handleChange函数，根据input的类型区分取值逻辑：

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  setTodoDetails((prev) => {
    // 只有checkbox类型的input才取checked值，其他类型都取value
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    return {
      ...prev,
      [e.target.id]: value,
    };
  });
};

这样文本类input清空时会正确设置为空字符串，不会再出现自动填充"false"的问题。

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