主页 / 问题 / 1422197
Accepted
sasaarhipov21432gmailcom
Asked:2022-08-20 22:13:28 +0000 UTC2022-08-20 22:13:28 +0000 UTC

React - 显示表格并删除其中的元素

  • 772

我不知道如何确保在单击按钮时删除这个元素，而不是整行，我已经为这个问题坐了一个多小时。请告诉我如何准确删除一个元素及其按钮

import React, { useEffect, useState, Fragment } from 'react'
import { nanoid } from 'nanoid'

const initProds = [
    { id: nanoid(), name: 'prod1', catg: 'catg1', cost: 100 },
    { id: nanoid(), name: 'prod2', catg: 'catg2', cost: 200 },
    { id: nanoid(), name: 'prod3', catg: 'catg3', cost: 300 },
]


function App() {

    let [notes, setNotes] = useState(initProds)

    function deleteItem(name, prop, id) {
        setNotes(notes.map(note => {
            console.log(note[name])
            return note[name] !== prop ? note : delete note[name]
        }))
    }

    let result = notes.map(elem => {
        return <tr key={elem.id}>
            <td>{elem.name}<button onClick={() => deleteItem('name', elem.name, elem.id)}>delete</button></td>
            <td>{elem.catg}<button onClick={() => deleteItem('catg', elem.catg, elem.id)}>delete</button></td>
            <td>{elem.cost}<button onClick={() => deleteItem('cost', elem.cost, elem.id)}>delete</button></td>
        </tr>
    })

    return <div>
    <table>
            <tbody>
            {result}
        </tbody>
    </table>
        
        
    </div>
}
export default App
reactjs react-native

1 个回答

  1. Best Answer

    import React, { useState } from 'react'
import { nanoid } from 'nanoid'

const initProds = [
    { id: nanoid(), name: 'prod1', catg: 'catg1', cost: 100 },
    { id: nanoid(), name: 'prod2', catg: 'catg2', cost: 200 },
    { id: nanoid(), name: 'prod3', catg: 'catg3', cost: 300 },
]


function App() {

    let [notes, setNotes] = useState(initProds)

    function deleteItem(name, prop, id) {
        let arr = notes.map(note => {

            if(note[name] !== prop){
               return note
            }else{ 
                delete note[name]
                return note
            }
        })

        setNotes(arr)
    }

    let result = notes.map(elem => {
        return <tr key={elem.id}>
           { elem.name && <td>{elem.name}<button onClick={() => deleteItem('name', elem.name, elem.id)}>delete</button></td>}
           { elem.catg && <td>{elem.catg}<button onClick={() => deleteItem('catg', elem.catg, elem.id)}>delete</button></td>}
           { elem.cost && <td>{elem.cost}<button onClick={() => deleteItem('cost', elem.cost, elem.id)}>delete</button></td>}
        </tr>
    })

    return <div>
    <table>
            <tbody>
            {result}
        </tbody>
    </table>
        
        
    </div>
}
export default App

    • 0

相关问题