功能组件中的 Preact clear array 不会删除所有输出

Question

我对前端开发很陌生，正在尝试构建一个简单的待办事项组件。我在重置阵列时遇到问题。 DOM 中始终保留一项。但只有“DEL”键。

所有其他函数/挂钩都按预期工作。

这是代码：

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()

    // const out = todos.push(input)
    setTodos([...todos, input])
    setInput('')
  }

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


export default Todo

Answer 1

您的 submit 函数会将 input 添加到您的待办事项列表中，即使输入的是空字符串。这就是为什么您的列表中只有一个 DEL 按钮。相反，检查输入是否为空，如果是，则 return.

  const onSubmit = ev => {
    ev.preventDefault();
    if(input === '') {
      return;
    }

    // const out = todos.push(input)
    setTodos([...todos, input])
    setInput('')
  }

功能组件中的 Preact clear array 不会删除所有输出

Preact clear array in functional component does not remove all output

javascript

preact