React——共享state
通常,一些组件需要反映相同的数据更改,这种情况推荐将共享state移动到它们最近的公共祖先上。
在这里有一个例子:有一个温度计算器计算在给定温度是否能让水沸腾,用户可以输入华氏温度也能输入摄氏温度,当改变一种温度时另一种温度也要跟着改变
在这里摄氏温度输入框的值与华氏温度输入框的值要相互关联,所以这两个输入框都引用了同一个状态,所以这个共享的状态要位于他们最近的公共祖先上。具体代码如下:
// 温度输入组件
class TemperatureInput extends React.Component{
handleChange(event){
this.props.change(this.props.scale,event.target.value);
}
render(){
return <p>
<label>{this.props.scale === 'c' ? '摄氏温度' : '华氏温度'}:</label>
<input type='text' value={this.props.value} onChange={this.handleChange.bind(this)}/>
</p>
}
}
// 显示是否沸腾的组件
class ShowBoil extends React.Component{
render(){
if(this.props.temperature >= 100){
return <p>The water would boil</p>
} else {
return <p>The water would not boil</p>
} }
}
// 温度计算组件
class Calculator extends React.Component{
constructor(props){
super(props);
this.state = {
scale:'c',
temperature:''
};
}
changeState(scale,temperature){
this.setState({scale,temperature});
}
covertTemperature(scale,temperature){
if(Number.isNaN(parseFloat(temperature))){
return ''
}
// 把摄氏温度转换为华氏温度
if(scale === 'c'){
return ((temperature * 9 / 5) + 32) + '';
}
// 将华氏温度转换为摄氏温度
else {
return ((temperature - 32) * 5 / 9 ) + '';
}
}
render(){
const scale = this.state.scale;
const temperature = this.state.temperature;
const cTemperature = scale === 'f'?this.covertTemperature(scale,temperature):temperature;
const fTemperature = scale ==='c'?this.covertTemperature(scale,temperature):temperature;
return (
<div>
<TemperatureInput change={this.changeState.bind(this)} value={cTemperature} scale='c'/>
<TemperatureInput change={this.changeState.bind(this)} value={fTemperature} scale='f'/>
<ShowBoil temperature={cTemperature}/>
</div>
)
}
}
React——共享state的更多相关文章
- React:Lifting State Up
在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的.在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西.只是 ...
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
- [React] Update State in React with Ramda's Evolve
In this lesson we'll take a stateful React component and look at how we can refactor our setState ca ...
- React给state赋值的两种写法
如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...
- Recoil & React official state management
Recoil & React official state management Redux Recoil.js https://recoiljs.org/ A state managemen ...
- React & update state with props & Object.assign
React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...
- 七天接手react项目 —— state&事件处理&ref
state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...
- React组件State提升(译)
译自:https://reactjs.org/docs/lifting-state-up.html (适当进行了裁减) 通常我们会碰到这样的情况,当某个组件的state数据改变时,几个React组件同 ...
- [React Fundamentals] State Basics
State is used for properties on a component that will change, versus static properties that are pass ...
随机推荐
- 流API--提取流+组合流
提取子流和组合流 1,limit(n)会返回一个包含n个元素的新流,如果原始流的长度小于n,则会返回原始的流.这个方法可用来裁剪指定长度的流. 2,skip(n)正好相反,它会丢弃掉前面的n个元素. ...
- springMVC中使用POI方式导出excel至客户端、服务器实例
Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 这里的方法支持导出excel至项目所在服务器,或导 ...
- tcpdump 使用
例子: 首先切换到root用户 tcpdump -w aaa.cap -i eth7 -nn -x 'port 9999' -c 1 以例子说明参数: -w:输出到文件aaa.cap ...
- struts 中自定义action访问方法
struts中action类继承了ActionSupport 默认实现了execute()方法 struts.xml配置文件中 然后可以配置如下映射: <package name =" ...
- 安卓studio导入jra包和so包,百度地图so包加载
导入so包 这个我只接受测试可用的一种方法 第一步:把so包放在libs目录下,可以是文件夹也可以是单独的一个个so文件 然后在src同级的目录下找到build.gradle文件下如下信息 sourc ...
- DAY10-万物皆对象-2018-2-2
许久没有写了,虽然每天都有在学,但是学的东西也少了,后面难度慢慢加大,学习速度也是变慢了.这是许多天积累下来的笔记,从第一次接触对象,到慢慢去了解,现在处于还待深入了解的状态.万物皆对象,那是不是说没 ...
- backupMysql.sh
#!/bin/sh #!/bin/bash function backup() { for i in $* do mysqldump -h$hostip -P$port -u$username -p$ ...
- php之快速排序
<?phpfunction shell_sort(array $arr){ $right=$left = array(); $Rights=$Lefts = array() ...
- SQL explain详细结果
explain 的结果 id select_type 查询的序列号 select_type simple (不含子查询) primary (含子查询.或者派生查询) subquery (非from子查 ...
- Spark Streaming编程指南
Overview A Quick Example Basic Concepts Linking Initializing StreamingContext Discretized Streams (D ...