react10_状态提升

react 状态提升

一个父组件和多个子组件时，本来应存在于子组件的state移动到父组件，子组件使用props，父组件的state作为子组件的props传入子组件，可以使用子组件的功能，使子组件数据同步，也能更新父组件的渲染

//根据输入的温度判断是否沸腾 组件
function BoilingVerdict(props) {
    if(props.celsius >= 100){
        return <p>The water would boil.</p>
    }
    else{
        return <p>The water would not boil.</p>
    }
}

//输入摄氏、华氏温度 组件
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);
        console.log('temperature:'+e.target.value);
        
    }

    render() {
        // const temperature = this.state.temperature;
        const temperature = this.props.temperature;
        return (
            <fieldset className="formFieldset">
                <legend>Enter temperature in {this.props.scale}: </legend>
                <input type="text" value={temperature} onChange={this.handleChange} />
            </fieldset>
        );
    }
}

//温度计算器，渲染BoilingVerdict组件
class Calculator extends React.Component {
    constructor(props) {
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {
            temperature: ''
        };
    }

    handleCelsiusChange(temperature){
        console.log('calculatorC:'+temperature);
        
        this.setState({scale: 'c', temperature});
    }

    handleFahrenheitChange(temperature){
        console.log('calculatorF:' + 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='Celsius' temperature={celsius} onTemperatureChange={this.handleCelsiusChange} /><br /><br />
                <TemperatureInput scale='Fahrenheit' 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();
}

ReactDOM.render(
    <Calculator />,
    document.getElementById('react_test')
);