javascript - 如何从 React 功能组件（待办事项列表）中的状态数组中过滤出一个项目

Question

当我单击它时，我试图让待办事项列表项消失。除了我的 deleteHandler 方法外，一切正常，我需要什么逻辑来过滤掉点击的项目？

import React, { useState } from 'react';

const ToDoList = () => { 
    const [list, setList] = useState([])
    const [item, setItem] = useState("")

    const submitHandler = (e) => {
        e.preventDefault();
        let newList = list.concat(item)
        setList(newList);
        console.log(item)
        e.target.reset();   
    }

    const deleteHandler = (index) => {
        console.log(list[index])
        // console.log(list)
        const newList = list.filter((item) => list.indexOf(item) !== item[index]) 
        console.log(newList)
        setList(newList)
               
    }

    return(
        <div>
             <h1>To Do List:</h1>
            <form onSubmit={submitHandler}>
                <input type='text' onChange={(e)=>setItem(e.target.value)}></input>
                <input type='submit' value='Add'></input>
            </form>
            {list.map((listItem, index) => (
                <div key={index} >
                    <p className="toDoItem" onClick={()=>deleteHandler(index)}>{listItem}</p>
                </div>
            ))}
        </div>
    )
}

export default ToDoList;

标签： javascriptreactjsreact-functional-component

Answer 1

这是您应该尝试的逻辑

const deleteHandler = (index) => {
  // Assuming that the index means the index of an item which is to be deleted.
  const newList = list.filter((item) => list.indexOf(item) !== index);
  setList(newList);
}