Wie exportiert man einen Status (benutzerdefinierter Wert) von einer Komponente in eine andere Komponente in React?

Question

Ich versuche den Namen der Stadt zu bekommen und benutze sie, um einen Ajax Call in Reaktion zu bilden. Ich erhalte den Namen der Stadt von einem Dropdown-Menü in this.state.selectValue und kann auf der Konsole in der Drop-Komponente angezeigt werden. Ich möchte den Wert ist Name der Stadt in meine Wetterkomponente, die als eine andere jsx-Datei geschrieben wird. Bitte lassen Sie mich wissen, wie Sie dies bewerkstelligen können, indem Sie auf den folgenden Code Bezug nehmen. Vielen Dank im Voraus.

Mein Tropfen Component

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; 

Mein Wetter Component

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

Lösung 1

Wenn ein Elternteil Komponente gibt es, die sowohl Tropfen und Wetter enthält, Sie selectValue als festlegen Zustand in der Elternkomponente. Than selectValue kann von der übergeordneten Komponente an Drop und Weather als Prop übergeben werden.

Darüber hinaus muss das handleChange -Ereignis auch in der übergeordneten Komponente definiert werden (damit es den selectValue-Status aktualisieren kann) und als eine andere Requisite an Drop übergeben werden, die als onChange für die Auswahl festgelegt wird.

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/

Lösung 2

Wenn ein Elternteil Komponente einfach nicht möglich ist - als Sie Flux als eine Möglichkeit, zu überprüfen, möchten Ihre Daten zu verwalten, wie Facebook vorgeschlagen. https://facebook.github.io/react/tips/communicate-between-components.html

Update mit {this.props.children} und Requisiten

Im Falle der Verwendung von {this.props.children} verwenden: {React.cloneElement(this.props.children, {selectValue: this.state.selectValue})}

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

Aktualisiert Fiddle: https://jsfiddle.net/joshdsantos/Lar10t4a/10/