时间戳

首页 > 解决方案 > 如何在两个反应兄弟组件之间传递数据？

javascript - 如何在两个反应兄弟组件之间传递数据？

问题描述

我有两个组件：它从输入字段中获取值。第二个组件是我获取 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 的值

标签： javascriptreactjs

解决方案

首先，您需要创建一个父类。然后您需要将回调函数作为道具传递给孩子。这里的 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>
    }
})

推荐阅读