Preact函数组件清空todo数组后DOM残留元素问题求助

开发者阿泽

2026-9-26

问题根因

你的CLEAR按钮放置在form表单内部，且未显式指定type属性，浏览器会默认将form内未声明type的按钮识别为submit类型。点击CLEAR按钮时会依次触发两个事件：

首先触发按钮的onClick事件，执行deleteList将todos数组重置为空
接着触发form的submit提交事件，执行onSubmit逻辑，此时input值为空字符串，会往todos数组中追加一个空字符串元素

空字符串在渲染时不会显示文本内容，所以最终页面上只会残留一个DEL按钮，和你遇到的现象完全一致。

修复方案

给CLEAR按钮显式添加type="button"属性，声明为普通按钮，不会触发表单提交即可。

修正后的核心代码片段：

<button type="button" onClick={deleteList}>CLEAR</button>

完整修正后的组件代码：

import { useState } from 'preact/hooks';

const Todo = () => {
  const [input, setInput] = useState('')
  const [todos, setTodos] = useState([])

  const onInput = ev => {
    setInput(ev.target.value)
  }

  const deleteItem = itm => {
    setTodos(todos.filter(el => el != itm))
  }

  const deleteList = () => {
    setTodos([])
  }

  const onSubmit = ev => {
    ev.preventDefault()
    setTodos([...todos, input])
    setInput('')
  }

  return (
    <>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          onInput={onInput}
          value={input}
          placeholder="Todo..."
          autoFocus="autofocus"
        />
        <button type="submit">Eingabe</button>
        {/* 新增type="button"属性 */}
        <button type="button" onClick={deleteList}>CLEAR</button>
      </form>
      <ul>
        { todos.map(el => {
          return (
              <li key={el}>
                {el}
                <button onClick={() => deleteItem(el)}>DEL</button>
              </li>
          )
        }) }
      </ul>
    </>
  )
}

export default Todo