react状态提升

状态提升

官网摄氏度与华氏度转化的例子

// class BoilingVerdict extends React.Component{
// constructor(props){
// super(props)
// }
// render(){
// if(this.props.celsius>=100){
// return <p>The water would boil.</p>;
// }
// return <p>The water would not boil.</p>;
// }
// }
// class Calculator extends React.Component{
// constructor(props){
// super(props);
// this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
// this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
// this.state = {temperature: '', scale: 'c'};
// }
// handleCelsiusChange(temperature) {
// this.setState({scale: 'c', temperature});
// }

// handleFahrenheitChange(temperature) {
// this.setState({scale: 'f', temperature});
// }
// render(){
// const scale = this.state.scale;
// const temperature=this.state.temperature;
// const celsius=scale==='f'?tryConvert(temperature,toCelsius):temperature;
// const fahrenheit=scale==='c'?tryConvert(temperature,toFahrenheit):temperature;
// return (
// <div>
// <TemperatureInput scale="c"
// temperature={celsius}
// onTemperatureChange={this.handleCelsiusChange}
// />
// <TemperatureInput scale="f"
// temperature={fahrenheit}
// onTemperatureChange={this.handleFahrenheitChange}
// />
// <BoilingVerdict
// celsius={parseFloat(celsius)} />
// </div>
// )
// }
// }
// function toCelsius(fahrenheit) {
// return (fahrenheit - 32) * 5 / 9;
// }

// function toFahrenheit(celsius) {
// return (celsius * 9 / 5) + 32;
// }
// function tryConvert(temperature, convert) {
// const input = parseFloat(temperature);
// if (Number.isNaN(input)) {
// return '';
// }
// const output = convert(input);
// const rounded = Math.round(output * 1000) / 1000;
// return rounded.toString();
// }
// const scaleNames = {
// c: 'Celsius',
// f: 'Fahrenheit'
// };
// class TemperatureInput extends React.Component {
// constructor(props) {
// super(props);
// this.handleChange = this.handleChange.bind(this);
// this.state = {temperature: ''};
// }

// handleChange(e) {
// // this.setState({temperature: e.target.value});
// this.props.onTemperatureChange(e.target.value);
// }

// render() {
// // const temperature = this.state.temperature;
// const temperature = this.props.temperature;
// const scale = this.props.scale;
// return (
// <fieldset>
// <legend>Enter temperature in {scaleNames[scale]}:</legend>
// <input value={temperature}
// onChange={this.handleChange} />
// </fieldset>
// );
// }
// }
// ReactDOM.render(<Calculator/>, document.getElementById('root'));

转载http://react.css88.com/docs/lifting-state-up.html

支出人民币和美元换算demo

class MoneyMax extends React.Component{
constructor(props){
super(props);
}
render(){
if(this.props.money>5000){
return <p>"本月超出预算"</p>
}
return <p>"本月未超出预算"</p>
}
}
class MoneyBox extends React.Component{
constructor(props){
super(props);
this.handleRmbChange = this.handleRmbChange.bind(this);
this.handleDollarChange = this.handleDollarChange.bind(this);
this.state={scale:'r',money:''}
}
handleRmbChange(money){
this.setState({scale:'r',money})
}
handleDollarChange(money){
this.setState({scale:'d',money})
}
render(){
const scale=this.state.scale;
const money=this.state.money;
const rmb=scale==='d'?tryConvert(money,toRmb):money;
const dollar=scale==='r'?tryConvert(money,toDollar):money;
console.log(dollar)
return (
<div>
<MoneyInput
scale="r"
money={rmb}
moneyChange={this.handleRmbChange}
/>
<MoneyInput
scale="d"
money={dollar}
moneyChange={this.handleDollarChange}
/>
<MoneyMax money={money}/>
</div>
)
}
}
function toRmb(dollar) {
return dollar/7;
}

function toDollar(rmb) {
return rmb*7;
}
function tryConvert(money, convert) {
const input = parseFloat(money);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
const scaleNames = {
r: 'Rmb',
d: 'Dollar'
};
class MoneyInput extends React.Component{
constructor(props){
super(props);
this.handleChange=this.handleChange.bind(this);
this.state = {money: ''};
}
handleChange(e){
this.props.moneyChange(e.target.value)
}
render(){
const money=this.props.money;
const scale = this.props.scale;
return (
<fieldset>
<legend>输入花销{scaleNames[scale]}:</legend>
<input value={money}
onChange={this.handleChange} />
</fieldset>
);
}
}
ReactDOM.render(<MoneyBox/>, document.getElementById('root'));

每月花销效果预览图