Botão Delete no ReactJS com Classe de Componente

Na programação com ReactJS, criamos componentes para construir a aplicação. Um botão delete é uma funcionalidade essencial em muitas aplicações, especialmente em formulários e listas.

Criação do Botão Delete com Classe de Componente

A seguir, apresento um exemplo de como criar um botão delete utilizando a classe de componente do ReactJS.

import React, { Component } from 'react';

class DeleteButton extends Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        event.preventDefault();
        this.props.onDelete();
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                Delete
            </button>
        );
    }
}

export default DeleteButton;

Utilização do Botão Delete

O botão delete pode ser utilizado em qualquer componente que precise desta funcionalidade. A seguir, apresento um exemplo de como utilizar o botão delete em um componente.

import React, { Component } from 'react';
import DeleteButton from './DeleteButton';

class ListaDeItens extends Component {

    constructor(props) {
        super(props);
        this.handleDelete = this.handleDelete.bind(this);
    }

    handleDelete() {
        // Lógica para delete um item da lista
    }

    render() {
        return (
            <ul>
                <li>Item 1 <DeleteButton onDelete={this.handleDelete} /></li>
                <li>Item 2 <DeleteButton onDelete={this.handleDelete} /></li>
                <li>Item 3 <DeleteButton onDelete={this.handleDelete} /></li>
            </ul>
        );
    }
}

export default ListaDeItens;

Conclusão

Neste artigo, apresentei como criar um botão delete utilizando a classe de componente do ReactJS. Esta funcionalidade é essencial em muitas aplicações que utilizam formulários e listas. Espero que este artigo tenha sido útil para você.