0

Tenho um componente pai do qual tenho um botão e quero passar o onPress pro componente filho, sou novo no react-native e estou com essa duvida, voces podem me ajudar ??

3
  • coloque seu código, irá ajudar
    – Costamilam
    7/05/2019 às 23:24
  • Bem vindo, recomendo que faça um tour e veja Exemplo Mínimo, Completo e Verificável.
    – Francisco
    7/05/2019 às 23:29
  • Eu coloquei uma resposta, mas, falta na sua pergunta o código, basicamente o evento pode ser compartilhado em outros componentes
    – novic
    8/05/2019 às 1:09

2 Respostas 2

0

Basicamente é assim:

class Pai extends React.Component { 
  onEventClick() {
    console.log('clicado');
  }
  render() {
    return (
      <div>
        <h3>Pai</h3>        
        <Filho onEventPropsClick={this.onEventClick.bind(this)} />
      </div>
    );
  }
}

class Filho extends React.Component {
  constructor(props){
    super(props);    
  }
  render() {
    const { onEventPropsClick } = this.props;
    return (
      <div>
        <h4>Filho</h4>
        <button onClick={() => onEventPropsClick()}>
          Clique Aqui
       </button>
      </div>
    );
  }
}

ReactDOM.render(<Pai/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root">Carregando ...</div>

3
  • Isso mesmo, deu de entender o seu exemplo apesar de estar usando react-native. Obrigado 8/05/2019 às 14:05
  • é a mesma coisa @HervessonPorto
    – novic
    8/05/2019 às 14:22
  • ok, valeu pela ajuda 9/05/2019 às 18:50
0

Fala Hervesson.

Você não colocou o código, mas imagino que é algo assim

Componente PAI

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

export default class ComponentePAI extends Component {
  state = {
    parametro_para_filho: "",
  };

  handleOnPress = () => {
    // Faz alguma coisa legal ou não.
    this.setState({ parametro_para_filho: "uma coisa legal" })
  };

  render() {
    return(
      <View>
      <TouchableOpacity onPress={() => this.handleOnPress()}>
        <Text>Aperte aqui</Text>
      </TouchableOpacity>
      <ComponenteFILHO handleOnPress={() => this.handleOnPress()} dePaiPraFilho={this.state.parametro_para_Filho} />
     </View>
    );
  }
}

No componente filho essa função ou o parâmetro vem via Props vem via props.

Componente Filho

import React from 'react';
import ...

const ComponenteFILHO = props => ( // pode usar desestruturação.
  <View>
    <TouchableOpacity onPress={() => props.handleOnPress()}>
      <Text>Clique aqui e veja o texto abaixo mudando</Text>
    </TouchableOpacity>
    <Text>{props.dePaiPraFilho}</Text>
  </View>
);

Não fiz nenhuma estilização ai, mas é necessário para vc ver o resultado final. Manda tudo pro meio.

3
  • Aqui a função que está sendo disparada está no Componente Pai, no caso eu quero que o evento de toque seja dado no componente Pai e a função seja disparada no Componente Filho. 8/05/2019 às 14:46
  • mas de qualquer forma já consegui resolver esse problema 8/05/2019 às 17:58
  • Ok então! Que bom que conseguiu. Até! 8/05/2019 às 18:39

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 .