javascript - how to delete a row from the table with a button on react? - Stack Overflow

admin 管理员组

文章数量: 1086019

I wanted to remove a row from the table with the function 'deleteRow(btn)' when pressing the button, but I get this error 'Cannot read properties of undefined (reading 'parentNode')'. What could I add or correct to successively drop a row from a table?

App.js

class App extends React.Component{

  constructor(props) {
    super(props);  

    this.state = {
      
      fotos: [],
      restaurantes:[],
     
    }

  }

   deleteRow=(btn)=> {
         var row = btn.parentNode.parentNode;
         row.parentNode.removeChild(row);
   }

   render(){  

      const { fotos, restaurantes } = this.state;

      <div className="container">
         <Tabela dadosFotos={fotos} restaurante={this.deleteRow} />
      </div>
   }
     

Tabela.js

import React from "react";

const CorpoTabela = (props) => {

const rows = props.dadosDasFotos.map((row) => {
    return(
    <tr key={row.idFoto}>
        <td>{row.nomeRestaurante}</td>
        <td>
             <button className="btn btn-outline-danger" 
                 onClick={()=>props.restauranteAremover(row.idFoto)}>
                 Delete restaurante
             </button>
        </td>
     </tr>        
    )  
})

return(<tbody>{rows}</tbody>)
}

class Tabela extends React.Component{

    render(){
        
        const { dadosFotos, restaurante }=this.props
        
        return(
            <table className="table table-striped">
                <CorpoTabela dadosDasFotos={dadosFotos} restauranteAremover={restaurante}/>
            </table>          
        )
    }
}

I wanted to remove a row from the table with the function 'deleteRow(btn)' when pressing the button, but I get this error 'Cannot read properties of undefined (reading 'parentNode')'. What could I add or correct to successively drop a row from a table?

App.js

class App extends React.Component{

  constructor(props) {
    super(props);  

    this.state = {
      
      fotos: [],
      restaurantes:[],
     
    }

  }

   deleteRow=(btn)=> {
         var row = btn.parentNode.parentNode;
         row.parentNode.removeChild(row);
   }

   render(){  

      const { fotos, restaurantes } = this.state;

      <div className="container">
         <Tabela dadosFotos={fotos} restaurante={this.deleteRow} />
      </div>
   }
     

Tabela.js

import React from "react";

const CorpoTabela = (props) => {

const rows = props.dadosDasFotos.map((row) => {
    return(
    <tr key={row.idFoto}>
        <td>{row.nomeRestaurante}</td>
        <td>
             <button className="btn btn-outline-danger" 
                 onClick={()=>props.restauranteAremover(row.idFoto)}>
                 Delete restaurante
             </button>
        </td>
     </tr>        
    )  
})

return(<tbody>{rows}</tbody>)
}

class Tabela extends React.Component{

    render(){
        
        const { dadosFotos, restaurante }=this.props
        
        return(
            <table className="table table-striped">
                <CorpoTabela dadosDasFotos={dadosFotos} restauranteAremover={restaurante}/>
            </table>          
        )
    }
}

• javascript
• html
• reactjs

Share Improve this question Follow asked Sep 11, 2021 at 21:14 GuyPeaceGuyPeace 5911 gold badge11 silver badge66 bronze badges 2

• 1 Why are you trying to directly manipulate the DOM, an anti-pattern in React, instead of deleting the element from the fotos array in state? You need to update the state so React triggers a rerender. Just deleting DOMNodes won't trigger your UI to rerender an updated view. – Drew Reese Commented Sep 11, 2021 at 21:22
• Your delete function is taking id not any HTML. In react like above ment you need to delete it from the list using filter react will react to your change and rerender – Sanish Joseph Commented Sep 11, 2021 at 21:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You should not be manipulating the DOM as this is an anti-pattern in React, instead you should update the state you are rendering from.

Delete by idFoto.

deleteRow = (idFoto)=> {
  this.setState(prevState => ({
    fotos: prevState.fotos.filter(el => el.idFoto !== idFoto
  }))
}

In the child pass the id to the delete handler.

<button className="btn btn-outline-danger" 
  onClick={() => props.restauranteAremover(row.idFoto)}>
  Delete restaurante
</button>

In React, you generally want to try avoiding direct DOM manipulation, since this takes state management out of React, which is something you want to avoid.

Therefore, instead of trying to delete each row directly using DOM functions like remove or removeChild, it would be best to keep all of the table rows in a key in the state object. Then, you can filter out the deleted row by filtering it out by index or through some other identifier. Here's an example:

import { Component } from 'react'
import './styles.css'

export default class App extends Component {
  state = {
    rows: [
      { id: 1, col1: 'A', col2: 'some text' },
      { id: 2, col1: 'B', col2: 'some text' }
    ]
  }

  spliceRow = (index) => {
    this.state.rows.splice(index, 1)
    this.setState({ rows: this.state.rows })
  }

  filterRows = (id) => {
    this.setState({
      rows: this.state.rows.filter((row) => {
        return row.id !== id
      })
    })
  }

  render() {
    return (
      <table className="App">
        <tbody>
          {this.state.rows.map((row, index) => {
            return (
              <tr key={row.id}>
                <td>{row.col1}</td>
                <td>{row.col2}</td>
                <td>
                  <button onClick={() => this.spliceRow(index)}>
                    Remove row with splice
                  </button>
                </td>
                <td>
                  <button onClick={() => this.filterRows(row.id)}>
                    Remove row with filter
                  </button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    )
  }
}

本文标签： javascripthow to delete a row from the table with a button on reactStack Overflow