admin管理员组文章数量:1026989
I am trying to get the name of the city and use it to make up an ajax call in react. I am getting the name of the city from a dropdown menu in this.state.selectValue and able to display on console in the Drop ponent. I would like to take the value is name of city into my Weather ponent which is written as another jsx file. Please let me know how to acplish thi, referring to the code below. Thanks in Advance.
My Drop 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 ponent in another jsx file.
return (
<div>
<p>
Choose Your city
<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;
My Weather Component
import React from 'react';
var WeatherReport = React.createClass({
getInitialState: function() {
return {count: 0};
},
ponentWillMount: function() {
console.log("Inside ponentWillMount");
},
ponentDidMount: function() {
console.log("Inside ponentDidMount");
var _FreeApiBaseURL = '/';
var _FreeApiKey = '592042b57a7e48369e4110703160508';
var input = {
city: "Bengaluru",// I need to replace "Bengaluru" with the value imported from Drop ponent 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;
I am trying to get the name of the city and use it to make up an ajax call in react. I am getting the name of the city from a dropdown menu in this.state.selectValue and able to display on console in the Drop ponent. I would like to take the value is name of city into my Weather ponent which is written as another jsx file. Please let me know how to acplish thi, referring to the code below. Thanks in Advance.
My Drop 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 ponent in another jsx file.
return (
<div>
<p>
Choose Your city
<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;
My Weather Component
import React from 'react';
var WeatherReport = React.createClass({
getInitialState: function() {
return {count: 0};
},
ponentWillMount: function() {
console.log("Inside ponentWillMount");
},
ponentDidMount: function() {
console.log("Inside ponentDidMount");
var _FreeApiBaseURL = 'http://api.worldweatheronline./premium/v1/';
var _FreeApiKey = '592042b57a7e48369e4110703160508';
var input = {
city: "Bengaluru",// I need to replace "Bengaluru" with the value imported from Drop ponent 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;
1 Answer
Reset to default 2Solution 1
If there's a parent ponent that contains both Drop and Weather, you can set selectValue as a state in the parent ponent. Than selectValue can be passed from the parent ponent to Drop and Weather as a prop.
Furthermore, the handleChange event will also have to be defined in the parent ponent (so that it can update the selectValue state) and passed as another prop to Drop to be set as the onChange for the select.
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/joshdsantos/Lar10t4a/2/
Solution 2
If a parent ponent is just not possible - than you might want to check out Flux as a way to manage your data, as suggested by Facebook. https://facebook.github.io/react/tips/municate-between-ponents.html
Update using {this.props.children} and props
In the case of using {this.props.children} use:
{React.cloneElement(this.props.children, {selectValue: this.state.selectValue})}
Docs: https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement
Updated Fiddle: https://jsfiddle/joshdsantos/Lar10t4a/10/
I am trying to get the name of the city and use it to make up an ajax call in react. I am getting the name of the city from a dropdown menu in this.state.selectValue and able to display on console in the Drop ponent. I would like to take the value is name of city into my Weather ponent which is written as another jsx file. Please let me know how to acplish thi, referring to the code below. Thanks in Advance.
My Drop 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 ponent in another jsx file.
return (
<div>
<p>
Choose Your city
<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;
My Weather Component
import React from 'react';
var WeatherReport = React.createClass({
getInitialState: function() {
return {count: 0};
},
ponentWillMount: function() {
console.log("Inside ponentWillMount");
},
ponentDidMount: function() {
console.log("Inside ponentDidMount");
var _FreeApiBaseURL = '/';
var _FreeApiKey = '592042b57a7e48369e4110703160508';
var input = {
city: "Bengaluru",// I need to replace "Bengaluru" with the value imported from Drop ponent 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;
I am trying to get the name of the city and use it to make up an ajax call in react. I am getting the name of the city from a dropdown menu in this.state.selectValue and able to display on console in the Drop ponent. I would like to take the value is name of city into my Weather ponent which is written as another jsx file. Please let me know how to acplish thi, referring to the code below. Thanks in Advance.
My Drop 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 ponent in another jsx file.
return (
<div>
<p>
Choose Your city
<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;
My Weather Component
import React from 'react';
var WeatherReport = React.createClass({
getInitialState: function() {
return {count: 0};
},
ponentWillMount: function() {
console.log("Inside ponentWillMount");
},
ponentDidMount: function() {
console.log("Inside ponentDidMount");
var _FreeApiBaseURL = 'http://api.worldweatheronline./premium/v1/';
var _FreeApiKey = '592042b57a7e48369e4110703160508';
var input = {
city: "Bengaluru",// I need to replace "Bengaluru" with the value imported from Drop ponent 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;
1 Answer
Reset to default 2Solution 1
If there's a parent ponent that contains both Drop and Weather, you can set selectValue as a state in the parent ponent. Than selectValue can be passed from the parent ponent to Drop and Weather as a prop.
Furthermore, the handleChange event will also have to be defined in the parent ponent (so that it can update the selectValue state) and passed as another prop to Drop to be set as the onChange for the select.
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/joshdsantos/Lar10t4a/2/
Solution 2
If a parent ponent is just not possible - than you might want to check out Flux as a way to manage your data, as suggested by Facebook. https://facebook.github.io/react/tips/municate-between-ponents.html
Update using {this.props.children} and props
In the case of using {this.props.children} use:
{React.cloneElement(this.props.children, {selectValue: this.state.selectValue})}
Docs: https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement
Updated Fiddle: https://jsfiddle/joshdsantos/Lar10t4a/10/
本文标签：
版权声明：本文标题：javascript - How to export a state(user selected value) from one component to another component in React? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745607608a2158816.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论