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

反应就是关于数据流向数据结构的一切。这意味着横向传输数据是一种不好的做法。您应该在父组件上获取所有相关数据，然后通过props进行分发，或者仅使用Redux或Flux集中应用程序的状态

Answer 3

您可能需要一个存储区（只是一个函数）来获取url数据，而不是在UI组件Pexels中。

在GetSearch中，以输入作为参数调用store函数并返回一个promise，并在回调中获取数据。

如何在两个反应同级组件之间传递数据？

3 个答案: