1

Eu estou com dificuldade de interagir uma classe com um componente usando React. Para poder criar um constructor, onde o new "classe" seria introduzido dentro do meu componente do React Dom.

Exemplo simples abaixo: existe o botão, e apenas para estudo gostaria de fazer com que o onclick desse botão ativasse o o new do constructor, criando arrays com o push assim:

class List {
  constructor() {
    this.data = [];
  }

  add(data) {
    this.data.push(data);
    console.log(this.data);
  }
}

class TodoList extends List {}

const minhaLista = new TodoList();

document.getElementByClassName("**inserirtodo**").onclick = () => minhaLista.add("novo todo");

No entanto estou usando React e ainda não estou familiarizado com a integração de classes que eu crio com os componentes do ReactDOM.

eu gostaria de inserir um evento com as características do código acima no botão. Para que o botão gerasse um array escrito "novo todo" dentro do objeto "data"

import React, {Component} from 'react';
import api from "../../services/api"


export default class Main extends Component {
    componentDidMount() {
        this.loadProducts();
    }

    loadProducts = () => {

    };


    render () {
        return <div>
            <button type="button" className="**inserirtodo**">
                click
            </button>
        </div>
    }
}
1
  • Não entendi muito bem, você quer fazer o mesmo de cima só que no React ? Commented 22/08/2019 às 14:08

1 Resposta 1

2

Criei um pequeno exemplo:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class List {
  constructor() {
    this.data = [];
  }

  add(data) {
    this.data.push(data);
    console.log(this.data);
  }
}

class TodoList extends List {}
const minhaLista = new TodoList();

function App() {
  return (
    <div className="App">
      <div className="todo-button" onClick={() => {
        minhaLista.add("novo todo");
      }}/>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Onde todo-button tem o estilo:

.todo-button {
  width: 300px;
  height: 100px;
  background: red;
}

Ao clicar no botão vermelho, é adicionada uma string "novo todo" em data de minhaLista normalmente. Isso é perfeitamente possível / normal ("Integrar classes"). Não importa o evento do componente, você pode interagir com métodos de instâncias normalmente, modificar objetos normalmente.

Você pode testar o exemplo aqui: https://codesandbox.io/embed/heuristic-agnesi-6xfrc (Cheque o console)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .