如何在兩個反應同級組件之間傳遞數據？

Question

我有兩個組成部分：從輸入字段中獲取價值。 第二個組件是我獲取api數據的組件。 問題是我想從GetSearch獲取值作為我在Pexels中搜索API的值。

我試圖多次更改代碼。 我只是不明白應該怎么做，以及我應該如何與我的組件實際進行交流。

import React from "react";

class GetSearch extends React.Component {
        constructor(props) {
          super(props);
          this.state = {value: ''};

          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
        }

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

        handleSubmit(event) {
          alert('A name was submitted: ' + this.state.value);
          event.preventDefault();
        }

        render() {
          var PassValue = React.CreateClass({
            render: function() {
              return (
                <p>{this.state.value}</p>
              );
            },
          });

          return (
            <form className="search-form">
            <input 
            type="text" 
            placeholder="Search for images" 
            value={this.state.value} 
            onChange={this.handleChange}/>
            <input type="submit"/>
            </form>
          );
        }
      }

export default GetSearch

import React, { Component } from 'react'

export default class Pexels extends Component {

    componentDidMount(){
        let query = "water"
        const url = `https://api.pexels.com/v1/search?query=${query}e+query&per_page=15&page=1`
        const api_key = "xxxxxxxxxxxx"
        fetch(url, {
            method: 'GET',
          headers: new Headers({
            'Authorization': api_key
          })
        })
        .then(response => response.json())
        .then(data => {
          console.log(data)
        })
        .catch(error => console.error(error))
      }

  render() {
    return (
      <h1>Hello</h1>)
    }
}

因此，您現在可以看到：Pexels發送一個帶有water值的get請求：let query =“ water”，它可以正常工作。 但是我需要GetSearch組件中this.state.value中的值

Answer 1

首先，您需要創建一個父類。 然后，您需要將回調函數作為道具傳遞給子級。 在這里，GetSearch組件可以是您的子類。 單擊搜索按鈕后，您的主類方法將通知該更改。 然后根據需要創建邏輯。 請遵循以下示例代碼。 謝謝

父組件

var ParentComponent = React.createClass({
        update: function() {
            console.log("updated!");
        },
        render: function() {
          <ChildComponent callBack={this.update} />
        }
    })

子組件

    var ChildComponent = React.createClass({
    preupdate: function() {
        console.log("pre update done!");
    },
    render: function() {
      <button onClick={this.props.callback}>click to update parent</button>
    }
})

Answer 2

您可能需要一個商店（只是一個函數）來獲取url數據，而不是在UI組件Pexels 。

在GetSearch ，使用輸入作為參數調用store函數，並返回promise，並在回調中獲取數據。