TLDR: ¿Cómo recuperaría la consola.log desde el componente secundario después de que se haya enviado URL

Quiero poder obtener los datos de respuesta del componente secundario después de que se haya enviado una URL. ¿Cómo podría hacer esto?

En otras palabras, ¿cómo puedo disparar la función onClick después de que se haya enviado una URL?

Código sandbox

https://codesandbox.io/s/cool-feat-fjkv6

Principal

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Child from './Child';
class Parent extends Component {
  constructor(props){
    super(props);
    this.state = {
      url:'',
      outputUrl:''
    }
  }
  onChange = (e) => {
    e.preventDefault();
    this.setState({
      url: e.target.value
    })
  }
  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.url)
  }
  render(){
    return (
      <div className="App">
          <form onSubmit={this.onSubmit}>
              <input type="text" onChange={this.onChange} value={this.state.url} placeholder="Enter url " />
              <button type="submit" >Submit</button>
          </form>
        {/* if have url else enter test url */}

          <Child url={this.state.url} method={'GET'} />

      </div>
    );
  }
}
export default App;

¿Cómo recuperaría la consola.log desde el componente secundario después de que se haya enviado URL? Estoy ligeramente confundido. Lo siento si esto se ve confuso.

Niña

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class Child extends Component {    
  constructor(props){
    super(props);

    this.state = {
      data:[]
    }
  }
  // componentDidUpdate or try this
  onClick(){
     const url = `${this.props.url}`;  
     if(this.props.method === "GET"){
        axios.get(url).then( res => {
          this.setState({
            data: res.data
          })
          console.log(this.state.data)
        })
     }

     else if(this.props.method === "POST"){
        axios.get(url).then( res => {
          this.setState({
            data: res.data
          })
          console.log(this.state.data)
        })
     }

  } 
  render(){
    return (
      null
    );

  }

}

export default Child;
-1
BARNOWL 28 jun. 2019 a las 19:32

1 respuesta

La mejor respuesta

¡Por favor! Ver método de render en el componente infantil

class Child extends Component {
  static onClick() {
    // do something
  }
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  // componentDidUpdate or try this
  onClick = e => {
    e.preventDefault();
    const url = `${this.props.url}`;
    if (this.props.method === "GET") {
      axios.get(url).then(res => {
        this.setState({
          data: res.data
        });
        console.log(this.state.data);
      });
    } else if (this.props.method === "POST") {
      axios.get(url).then(res => {
        this.setState({
          data: res.data
        });
        console.log(this.state.data);
      });
    }
  };
  render() {
    return <div onClick={this.onClick}>Click Me</div>;// <------
  }
}
2
mvofreire 28 jun. 2019 a las 16:58