javascript - How to export a state(user selected value) from one component to another component in React?

admin管理员组
文章数量:1033170

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 &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;

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;

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 &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;

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;

Share Improve this question asked Aug 9, 2016 at 4:48 Chiraag Kashyap 911 gold badge2 silver badges9 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

Solution 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/

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 &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;

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;

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 &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;

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;

Share Improve this question asked Aug 9, 2016 at 4:48 Chiraag Kashyap 911 gold badge2 silver badges9 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

Solution 1

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

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，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - How to export a state(user selected value) from one component to another component in React? - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章

推荐一个非常牛皮的多功能IP工具箱

数据中台项目建设的深度剖析与实践分享

使用DeepSeek搭建个人知识库

从菜鸟到大神，Prompt设计的核心秘诀全在这里！

重磅更新！yolo v8.3.99发布：全球首个YOLOE开放词汇模型，支持文本视觉提示！

Power BI表格高级交互：分页浏览

当AI学会自己捉“虫”：模型自我优化框架大揭秘

原生APP开发的性能优势

DemoGen：用于数据高效视觉运动策略学习的合成演示生成

蚂蚁 &amp;amp; 清华联手开源，人人都能复刻QwQ

TikTok 原生跨平台 UI 框架 Lynx 宣布开源

在GSM8K上比GRPO快8倍！厦大提出CPPO，让强化学习快如闪电

ICLR 2025 Oral

CTO问我，为什么不按照教材上的3NF来设计数据库？（第50讲）

讯投 QMT 使用小技巧：优化数据处理与回测效率

【MySQL篇】从零开始：解锁数据库的神秘面纱

RocketMQ原理—2.源码设计简单分析一

Xvfb和VNC Server是什么

让数据“开口说话”——数据可视化的实用指南

Python 按指定条件删除 Excel 表格数据的方法

发表评论

推荐文章

【Linux】基于阻塞队列的生产消费者模型

惠普电脑网络重置指南

【Git#2】分支管理的基本操作

CentOS 7上配置SQL Server链接其他SQL Server服务器

Cramer法则

热门文章

探秘空间基因表达的 “地形图”：GASTON 算法重磅来袭！

国产车载通信测试方案：车规级CAN SIC芯片测试技术解析

YOLO场景选型与性能核心底牌！看C3K2、C2F、C3K如何决定应用场景

从业多年总结：支付宝小程序数据可视化实现秘籍

重装麒麟银河V10系统方法及资源

word 中的功能区所有下拉键都变成一个了，如何改成具有上下翻页的功能？

如何在SAP迁移和合并期间最大限度地减少目标机的停机时间

京东又开源一款新框架，用起来真优雅！

pom.xml出现“java.lang.OutOfMemoryError: Java heap space”问题的解决办法

C#开发者必知的10个冷门特性：让你的代码更高效、更智能

最新文章

Python 版本管理工具之 Pyenv 使用说明

dotnet 使用 HttpClient 时如何使用 Basic 认证？

Java Web 中的 request、response、redirect、forward 详解

python open 函数指定编码为 ansi 的方法

Python向IP地址发送字符串

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

javascript - Type &#39;undefined&#39; is not assignable to type &#39;menuItemProps[]&#39; - Stack Overflow

javascript - VS 2015 Angular 2 import modules cannot be resolved - Stack Overflow

javascript - Get the JSON objects that are not present in another array - Stack Overflow

javascript - How to dismiss a phonegap notification programmatically - Stack Overflow

c - Solaris 10 make Error code 1 Fatal Error when trying to build python 2.7.16 - Stack Overflow

蚂蚁 & 清华联手开源，人人都能复刻QwQ

javascript - Type 'undefined' is not assignable to type 'menuItemProps[]' - Stack Overflow