用ts重写React官方文档里的demo（7）——状态提升

//Calculator.tsx
import TemperatureInput from './TemperatureInput'
import React from 'react'

interface State {
    scale: string,
    temperature: string;
}

interface Bprops {
    celsius: number;
}

function BoilingVerdict(props: Bprops) {
    if(props.celsius >= 100) {
        return <p>The water would boil.</p>;
    }
    return <p>The water would not boil.</p>;
}

function toCelsius(fahrenheit: number): number {
    return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius: number): number {
    return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature: string, convert: Function) {
    const input = parseFloat(temperature);
    if(Number.isNaN(input)) {
        return '';
    }
    const output = convert(input);
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString()
}

class Calculator extends React.Component<{},State> {
    constructor(props:{}) {
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {temperature: '', scale: 'c'};
    }

    handleCelsiusChange(temperature: string) {
        this.setState({scale: 'c', temperature});
    }

    handleFahrenheitChange(temperature: string) {
        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>
        )
    }
}

export default Calculator;

//TemperatureInput.tsx
import React from 'react'

interface StringObject {
    [index: string] :string;
}

const scaleNames:StringObject = {
    c: 'Celsius',
    f: 'Fahrenheit'
}

export interface Props {
    scale: string;
    temperature: string;
    onTemperatureChange: Function
}

interface State {
    // temperature: string;
}

class TemperatureInput extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.handleChange = this.handleChange.bind(this)
        this.state = {temperature: ''};
    }

    handleChange(e: React.ChangeEvent<HTMLInputElement>) {
        // Before: this.setState({temperature: e.target.value})
        this.props.onTemperatureChange(e.target.value);
    }

    render() {
        // Before: 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>
        )
    }
}

export default TemperatureInput;