Question

我正在尝试获取城市的名称并使用它来组成一个ajax调用。我从this.state.selectValue的下拉菜单中获取城市的名称，并能够在Drop组件的控制台上显示。我想将值为city的名称转换为我的Weather组件，该组件被写为另一个jsx文件。请参考下面的代码告诉我如何完成这个。在此先感谢。

我的掉线组件

    import React from 'react';
    import Dropdown from 'react-bootstrap/lib/dropdown';

    var Drop = React.createClass({
    getInitialState() {
    return {selectValue: 'Bengaluru'};
},
handleChange(e) {

    this.setState({selectValue: e.target.value});

},

render() {
    var message = 'You selected ' + this.state.selectValue; // I want to export this (this.state.selectValue) value to my Weather component in another jsx file.
    return (
        <div>
            <p>
                Choose Your city &nbsp;
                <select id="cityList" value={this.state.selectValue} onChange={this.handleChange}>
                    <option value="Bengaluru">Bengaluru</option>
                    <option value="Hyderabad">Hyderabad</option>
                    <option value="Chennai">Chennai</option>
                    <option value="Mumbai">Mumbai</option> 
                </select>
                <p>{message}</p>
            </p>
        </div>
    );
}
    });
    export default Drop;

我的天气组件

    import React from 'react';
    var WeatherReport = React.createClass({

getInitialState: function() {      
    return {count: 0};      
},
componentWillMount: function() {
    console.log("Inside componentWillMount");
},
componentDidMount: function() {
    console.log("Inside componentDidMount");
    var _FreeApiBaseURL = 'http://api.worldweatheronline.com/premium/v1/';
    var _FreeApiKey = '592042b57a7e48369e4110703160508';
    var input = {
        city: "Bengaluru",// I need to replace "Bengaluru" with the value imported from Drop component ie this.state.selectValue. 
        days: 1
    };
    var url = _FreeApiBaseURL + 'weather.ashx?key=' + _FreeApiKey + '&q=' + input.city + '&format=json&num_of_days=' + input.days;
    console.log(url);
    $.ajax({
        url: url,
        dataType: 'json',
        type: 'GET',
        data: {
            maxTemp: "",
            minTemp: "",
            Humidity: "",
            Windspeed: ""
        },
        async: false,
        contentType: "application/json",


        success: function(data) {

          console.log(JSON.stringify(data));
          console.log(JSON.stringify(data.current_condition));

        },
        error: function(e) {
            console.log(e.message);
        }
    });
},

render: function() {
    return (
        <div>

            <p>
                Date ...
            </p>
            <p>
                Maximum Temperature ...
            </p>
            <p>
                Minimum Temperature ...
            </p>
            <p>
                Humidity...</p>
            <p>
                Wind Speed...</p>
            <button onClick={this.navigate.bind(this)}>
                Back</button>
        </div>
    );
}
    });

    export default WeatherReport;

Answer 1

解决方案1 

如果父组件同时包含Drop和Weather，则可以将selectValue设置为父组件中的状态。可以将selectValue从父组件传递到Drop和Weather作为道具。

此外，还必须在父组件中定义handleChange事件（以便它可以更新selectValue状态），并将另一个prop传递给Drop，将其设置为select的onChange。

var Parent = React.createClass({
    getInitialState: function() {
    return {selectValue: 'Bengaluru'}
  },
  handleChange: function(e) {
    this.setState({selectValue: e.target.value});
  },
  render: function() {
    return (
        <div>
        <Drop selectValue={this.state.selectValue} handleChange={this.handleChange} />
        <Weather selectValue={this.state.selectValue} />
      </div>
    );
  }
});

var Drop = React.createClass({
    render: function() {
    return (
        <div>
        Drop Component:
        <select id="cityList" value={this.props.selectValue} onChange={this.props.handleChange}>
          <option value="Bengaluru">Bengaluru</option>
          <option value="Hyderabad">Hyderabad</option>
          <option value="Chennai">Chennai</option>
          <option value="Mumbai">Mumbai</option> 
        </select>
      </div>
    );
  }
});

var Weather = React.createClass({
    render: function() {
    return (
        <div>Weather Component: {this.props.selectValue}</div>
    );
  }
});

https://jsfiddle.net/joshdsantos/Lar10t4a/2/

解决方案2

如果不能使用父组件 - 那么您可能需要检查Flux作为管理数据的方法，如Facebook所建议的那样。 https://facebook.github.io/react/tips/communicate-between-components.html

使用{this.props.children}和道具

进行更新

在使用{this.props.children}的情况下使用： {React.cloneElement(this.props.children, {selectValue: this.state.selectValue})}

文档：https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

更新小提琴：https://jsfiddle.net/joshdsantos/Lar10t4a/10/

如何在React中将状态（用户选择的值）从一个组件导出到另一个组件？

1 个答案: