如何从其他组件调用/执行方法/函数

Question

I will want to know, if is possible call or execute a method or function from another component.

I would like to run asynchronously the function that is the tableInformacion.js , which has a request get , but after the call of the post request is made that I have in address.js .

address.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import request from 'superagent';
import {getSolarDayInformation} from './tableInformation.js';

import '../styles/main.css';

class AddressInput extends Component{

    constructor(){    
        super();
        this.state = {
            address: "",
            api:"http://maps.google.com/maps/api/geocode/json?address=",
            direccion: "",
            latitud: "",
            longitud:""          
        };
    } 

    render(){
        return(
            <div> 

                <form>      

                    <input type="text" 
                           value={this.state.address} 
                           onChange={this.updateAdress.bind(this)}
                           placeholder="Escriba la direccion"/>

                    <button onClick={this.getAddressGeo.bind(this)}>Consultar</button> 
                </form>

                <ul className="None-Style">
                    <li><label>Direccion:</label>{this.state.direccion}</li>
                    <li><label>Latitud:{this.state.latitud}</label></li>
                    <li><label>Longitud:{this.state.longitud}</label></li>
                </ul>
            </div> 
        )
    }

    updateAdress(event){
        this.setState({
            address: event.target.value
        });
    }

    getAddressGeo(e){

        e.preventDefault();
        const apiUrl = this.state.api + this.state.address;

        request.post(apiUrl).then((res) => {

            const direccionCompleta = res.body.results[0].formatted_address; 
            const Latitud = res.body.results[0].geometry.location.lat;
            const Longitud = res.body.results[0].geometry.location.lng;             

           this.setState({
                direccion: direccionCompleta,
                latitud: Latitud, 
                longitud: Longitud
            })

        })
        .catch((err) => {
            console.log(err.message);
        });

        getSolarDayInformation();

    } 
}

export default AddressInput;

tableInformacion.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import request from 'superagent';

class TableConsumeInformation extends Component{

    constructor(){
        super();
        this.state = {
            apiSolarInformation: 'https://asdc-arcgis.larc.nasa.gov/cgi-bin/power/v1beta/DataAccess.py?request=',
            parameters:'execute&identifier=SinglePoint&parameters=ALLSKY_SFC_SW_DWN&',
            startDate:'0101&',
            endDate:'1231&',
            comunity: 'userCommunity=SSE&tempAverage=DAILY&outputList=JSON,ASCII&',
            latitudePlace:'lat=',
            longitudePlace:'&lon=',
            anonymous:'&user=anonymous'
        };
    }

    render(){
        return(
            <div>
                <h2>Information Energy</h2>
                <table></table>
            </div>
        );
    }

    getSolarDayInformation(){
        apiSolarUrl = 'https://asdc-arcgis.larc.nasa.gov/cgi-bin/power/v1beta/DataAccess.py?request=execute&identifier=SinglePoint&parameters=ALLSKY_SFC_SW_DWN&startDate=20170101&endDate=20171231&userCommunity=SSE&tempAverage=DAILY&outputList=JSON,ASCII&lat=11.373&lon=-72.253&user=anonymous';
        request.get(apiSolarUrl).then((req, res) => {
            console.log(res.body);
        });
    }

}

export default TableConsumeInformation;

Answer 1

I assume you are talking about the getSolarDayInformation function in this case.

In your case here, it looks like the easiest thing to do would be to refactor your function into its own file and import it into all the places its needed. There is no reason for it to be a object method as it has no dependency on the object state.

Answer 2

You could create a helper functions file , something like

helper.js

export const getSolarDayInformation = () => {
    ...
}

Then, import the method in your other file(s)

import {getSolarDayInformation} from 'path/to/your/file';