Передать данные родителю без щелчка - PullRequest
Новая
       9

Передать данные родителю без щелчка

0 голосов
/ 01 июля 2019

Я только начал изучать ReactJS, и мне нужна помощь. Я пытаюсь отправить данные от дочернего к родительскому компоненту, и у дочернего элемента есть кнопка с кодом

Вот мой ребенок 

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

class Locate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      city: "",
      countryName: ""
    };
  }

  componentDidMount() {
    axios
      .get("https://ipapi.co/json/")
      .then(response => {
        let data = response.data;
        this.setState({
          city: data.city,
          countryName: data.country_name
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <p> Country Name: {this.state.countryName} </p>
        <button onClick={() => { this.props.updateCity(this.state.city)}}>My city</button>
      </div>
    );
  }
}

export default Locate;

а вот и мой родитель 

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import Locate from "./location.js"


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

    };
  }

updateCity = (value) => {
   this.setState({ city: value });
}

  render() {
    return (
      <div>

        <Locate updateCity={this.updateCity} />

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

все работает нормально, но мне нужно передать this.state.city без кнопки onClick. Как это сделать?

1 Ответ

0 голосов
/ 01 июля 2019

Вы можете создать свою собственную функцию в компоненте и вызывать ее по желанию, когда вам это необходимо в потоке приложения.

например. 

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

class Locate extends React.Component {
...
  myFunction() {
   this.props.updateCity(this.state.city)
  }

  componentDidMount() {
    // example calling it on didMount 
    this.myFunction();
  }
....
}

Если вам нужно обмениваться данными между родителем и ребенком, вы можете посмотреть на Context API, который может быть полезен для вас

...