React Tutorial Project --Tempera

教程里的小栗子，看了下codepen里的结果样子直接做了。然后对照下源码查漏补缺。

需求描述

界面包括2部分。
表单部分：可以输入温度值。
文字部分：根据输入的温度值判断水温是否达到100度，如果达到了则显示boiled。
功能部分：复用表单两次，一个表单是华氏温度，一个是摄氏温度。表单的文字会根据温度标尺类型显示这是华氏温度表还是摄氏温度表。同时输入其中一个表单的温度，会自动换算温度到另一个里面。

设计思路

1. 首先是App这个组件，引用2次表单的组件<TemperatureInput/>，再加一个判断水温的组件<JudgeTemperature/>。自然App这个组件需要加上temperatureCelsius和temperatureFahrenheit作为状态。表示现在的摄氏温度和华氏温度。
2. 首先是简单的<JudgeTemperature/>。功能就是测试水温，所以API里只要传入一个temperature就好了。
3. 然后是TemperatureInput这个。API设计了这个type表示这是哪种类型的温度计、然后temperature，让这个温度显示在input上面。同时还需要增加修改的方法函数onChange。
4. 在App组件里调用TemperatureInput的时候，华氏温度表把'f'作为type传过去，把temperatureFahrenheit作为温度传过去，把一个同步摄氏温度的函数handleChangeFahrenheit传过去。同理摄氏温度表。

源码

import React from 'react';
import ReactDOM from 'react-dom';

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

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

class JudgeBoiled extends React.Component{
    render(){
        // API props.temperature
        const temperature = this.props.temperature;
        // Internal Logic
        const returntext = temperature >= 100 ? 'Water is boiled' : 'Water not boil yet'
        return(
            <div>{returntext}</div>
        );
    };
}


class TemperatureInput extends React.Component {

    render() {
        // API
        const type = this.props.type;
        const temperature = this.props.temperature;
        const inputfunction =  this.props.onChange;
        // Internal Logic
        const typeValue = {c:'Celsius',f:'Fahrenheit'};
        const legendtext = typeValue[type];
        return (
            <div>
                <fieldset>
                    <legend>Please input the {legendtext} temperature here</legend>
                    <input type="text" onChange={inputfunction} value={temperature}/>
                </fieldset>
            </div>
        );
    };
}

class Temperature extends React.Component {
    constructor(){
        super();
        this.state={temperatureCelsius:'',
        temperatureFahrenheit:''};
    };

    // handleChange(e){
    //     const new_temperature = e.target.value;
    //     this.setState({temperature:new_temperature});
    // }

    handleChangeCelsius(e){
        const new_temperatureCelsius = e.target.value;
        const new_temperatureFahrenheit = toFahrenheit(new_temperatureCelsius);
        this.setState({temperatureCelsius:new_temperatureCelsius,
        temperatureFahrenheit:new_temperatureFahrenheit});
    };

    handleChangeFahrenheit(e){
        const new_temperatureFahrenheit = e.target.value;
        const new_temperatureCelsius = toCelsius(new_temperatureFahrenheit);
        this.setState({temperatureCelsius:new_temperatureCelsius,
            temperatureFahrenheit:new_temperatureFahrenheit});
    };


    render() {
        return (
            <div>
                <TemperatureInput type="c" onChange={this.handleChangeCelsius.bind(this)} temperature={this.state.temperatureCelsius}/>
                <TemperatureInput type="f" onChange={this.handleChangeFahrenheit.bind(this)} temperature={this.state.temperatureFahrenheit}/>
                <JudgeBoiled temperature={this.state.temperatureCelsius}/>
            </div>
        );
    };
}

ReactDOM.render(
    <Temperature />,
    document.getElementById('root')
);