Question

我正在尝试构建一个应用程序来帮助我学习反应。这是一个简单的应用程序，它可以获取用户输入的位置，并从Google地理位置api获取坐标，然后使用暗天空api获取该位置的天气状况。

我本来所有的应用程序逻辑都放在一个容器中，您可以在这里https://github.com/darragh3277/night-sky

我想进一步区分我的逻辑，因为我觉得我的一个容器正在做很多事情。我正在按以下方式构建我的应用程序。

App.js-保存状态，locationChangeHandler函数向下传递到LocationSearchContainer。

LocationSearchContainer-地理位置API，并调用LocationSearch以显示搜索栏

WeatherContainer-WeatherAPI并调用Weather组件以呈现显示。

我相信这可以使我更好地分离关注点，并使我的代码更具可读性。

由于这种结构，我认为我需要在App.js中将locationChangeHandler传递给Dump LocationSearch组件。这使我的App.js与搜索栏紧密相连，但这是应用程序的核心功能，我认为这不是问题。

我遇到的麻烦是如何从App.js-> LocationSearchContainer-> LocationSearch中传递我的处理程序。到目前为止，这是我的糟糕尝试：

在App.js中，我有

handleLocationChange = e => {
    e.preventDefault();
        console.log('hello');

        //Calls getLocation in LocationSearchContainer and updates state
}

render(){
    return (
            <LocationSearchContainer onLocationChange={this.handleLocationChange} />
    )
}

在LocationSearchContainer中，我有以下内容：

import React from 'react';
import LocationSearch from '../components/LocationSearch';


class LocationSearchContainer extends React.Component{

    getLocation = (address) => {

        //DO STUFF

    }

    render(){

        return (
            <LocationSearch onLocationChange={this.props.handleLocationChange} />
        )

    }

}

export default LocationSearchContainer;

最后是LocationSearch：

import React from 'react';

const LocationSearch = (
            <form onSubmit={props.onLocationChange}>
                <div className="input-group">
                    <input type="text" name="location" className="form-control" placeholder="Search location..." />
                    <button className="btn btn-primary">Go!</button>
                </div>
            </form>
)

export default LocationSearch;

如何正确传递此处理程序？

完成上述工作后，我还需要从App.js的SearchLocationContainer中调用getLocation，但我也不知道该怎么做？

编辑

我已经找出了问题的第一部分。我是通过名称而不是通过的prop名称来调用函数。因此，在我的LocationSearchContainer的render（）函数中，我应该有

return (
        <LocationSearch onLocationChange={this.props.handleLocationChange} />
    )

而不是我的原始照片。

这仍然给我带来了从App.js文件调用LocationSearchContainer的getCoordinates函数的问题。有人可以帮助我吗？

向多个子反应传递函数reactJS

0 个答案: