React学习Day#1=>React状态提升

React状态提升

1. 应用场景
   当多个子组件需要反映相同的变化数据，此时进行状态提升，将该数据提升至父组件中以简化操作。

2. 举例示范

   以人民币与美元换算为例

   两个input输入框（子组件），一个框中输入人民币，另一个框自动换算为美元。

   父组件：

import React from 'react'
import Child1 from './a.jsx'
import Child2 from './b.jsx'

export default class Parent extends React.Component{
	constructor(props){
		super(props)
		this.state={
			money:2
			}
    }
    
  changeMoney = (e)=>{
    this.setState({
      money:e.target.value
    })
  }

	render(){
		return (
			<div>
				<p>Parent</p>
        <input type='text' value={this.state.money} onChange={this.changeMoney}/><br />
				人民币:<Child1 money={this.state.money}/><br />
				美元：<Child2 money={this.state.money}/>
			</div>
			)
		}
	}

子组件(两个子组件代码大同小异）：

import React from 'react'

export default class Child1 extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                <input type='text' value={this.props.money}/>
            </div>
        )
    }
}