React子组件点击删除按钮向父组件传递元素ID的实现求助

要完成点击子组件删除按钮后把对应笔记ID传给父组件的功能，按以下步骤修改代码即可：

1. 父组件中定义删除处理函数 #

在Main组件里新增一个处理删除逻辑的函数，它接收笔记ID，通过filter过滤掉对应ID的笔记并更新状态：

const Main = () => {
    // ... 原有代码
    
    // 新增删除处理函数
    const handleDelete = (noteId) => {
        setNote(prevNotes => prevNotes.filter(note => note.id !== noteId));
    }

    // ... 原有代码
}

2. 父组件传递ID和回调给子组件 #

渲染Notes组件时，把当前笔记的ID和刚才定义的handleDelete函数作为props传入：

{ 
    mynote.map((obj)=>{
        return( 
            <div key={obj.id} onClick={() => handleClick(obj.id)} className={`notes ${isActive === obj.id ? 'active':'inactive'}`}>
                <Notes 
                    notetitle={obj.title} 
                    notedate={obj.date} 
                    noteId={obj.id}  // 传递当前笔记ID
                    onDelete={handleDelete}  // 传递删除回调函数
                />
            </div>    
        )
    })     
} 

3. 子组件接收props并绑定删除事件 #

修改Notes组件，新增接收noteId和onDelete两个props，然后给删除按钮的图片绑定点击事件，触发回调并传入当前笔记ID：

const Notes = ({notetitle, notedate, noteId, onDelete}) => {
   
    return (
        <div className="note">
            {/* ... 原有代码 */}
            <div className="div2">
                <div className="delimg">
                    <img 
                        src={del} 
                        alt="delete" 
                        onClick={() => onDelete(noteId)}  // 绑定删除点击事件
                    />
                </div>
            </div>
        </div>
    )
}

这样点击子组件里的删除按钮时，对应笔记的ID就会传递到父组件的handleDelete函数中，父组件会过滤掉该ID的笔记，完成删除操作。

另外注意：你父组件中的handleClick和setisNav函数目前未定义，需要补充实现或者移除对应的调用，避免运行报错。

内容的提问来源于stack exchange，提问作者Akash Kr. Das