-2

estou tentando algumas formas mas não funciona, coloquei uma string no console.log pra confirmar. mas não vai, esse é o componente com um button, tentei chamar com o onClick mas nao deu certo



class CardProduto extends React.Component {
  render() {
    return (
      <ContainerProduto>
        <img src={this.props.urlImagem} alt={"imagem-produto"} />
        <p>{this.props.nome}</p>
        <p>{this.props.preco}</p>
        <button onClick={this.props.adiciona} >Adicionar ao 
        Carrinho</button>
      </ContainerProduto>
    );
  }
}

export default CardProduto;```






>esse é o componente pai




```import React from 'react';
import CardProduto from './components/CardProduto.js'

class App extends React.Component {

  state = {
    produtos: [
      {
        imagem: "https://picsum.photos/300/150?a=1",
        nome: "Item A",
        preco: 199.00,
        adiciona: false 
      },

    ],

  }
  adicionaProdutoAoCarrinho = () => {
    console.log("Adiciona ao Carrinho",this.state.adiciona)
  }


  render() {
    const listaProdutos = this.state.produtos.map (produto => {
      return (
        <CardProduto key = {produto.nome}
          urlImagem={produto.imagem}
          nome={produto.nome}
          preco={produto.preco}
          adiciona={produto.adiciona}

        />
      )
    })


    return (
      <div>
        <div>
          <p>

          </p>
        </div>
        <div>{listaProdutos}</div>
      </div>
    );
  }
}

export default App;```

> criei essa função adicionaProdutoAoCarrinho, pra sinalizar quando o botão receber um click. daí o o produto seria add ao carrinho e tals


1
  • talvez me expressei errado: O botão esta dentro de um componente (CardProduto.js) e quero que ao clicar no botão invoque a função de adicionar o item do array que esta no estado( boolean - o estado esta no elemento pai App.js) para uma nova função (case true) adiciona no carrinho. 24/04/2020 às 20:32

2 Respostas 2

1

Para realizar a chamada de um evento em componente no React passado por props utilize da seguinte forma:

App.js

import React from "react";
import "./styles.css";
import Button from "./container/Button";

export default function App() {
  function handleClick(e) {
    e.preventDefault();
    console.log("cliquei");
  }

  return (
    <div className="App">
      <Button evento={handleClick} />
    </div>
  );
}

components/Button/index.js

import React from "react";

export default function Button({ evento }) {
  return <button onClick={evento}>Botão teste</button>;
}
1
  • Acho q não é isso, talvez me expressei errado: 24/04/2020 às 20:24
0

Pelo que entendi, você quer que o botão 'Adicionar ao Carrinho', do componente 'CardProduto.js' chame uma função que está no componente pai 'App.js'. Você fez corretamente a passagem de um prop para o componente filho, porém no retorno você não está alterando nada. Você precisa alterar o estado de uma variável no retorno do botão, então eu faria desta forma:

CardProduto.js

export default class CardProduto extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.adiciona()}>Adicionar ao Carrinho</button>
      </div>
    );
  }
}

App.js

export default class App extends React.Component {
  state = {
     adiciona: false
  }

  function handleAdd(){
     this.setState({
        adiciona: true
     });
  }

  render() {
    return (
      <div>
         <CardProduto adiciona={this.handleAdd()}/>
      </div>
    );
  }
}

Espero ter sanado sua dúvida.

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 .