react-demo

1.創建react項目

create-react-app -v 查看是否安裝react腳手架， 沒有的話全局安裝;

create-react-app demo 創建react項目;

npm run start啓動項目；

2.根據日曆上的日期計算年齡

npm install antd --save 安裝antd ，注意代碼中引入antd的方式;

關鍵點：antd的使用 、日期獲得getFullYear（是num類型）、取子字符串subString

import React ,{Component} from 'react'
import {DatePicker} from "antd"
import 'antd/dist/antd.css'

class AgeComputer extends Component{
    constructor(props){
        super(props);
        this.state={
            age:''
        };
        this.handleChange=this.handleChange.bind(this);
        this.handleChange2=this.handleChange2.bind(this);
    }


    //date是一個moment對象，dateString是yyyy-mm-dd格式的日期 
    //空的話date和dateString都是null
        handleChange(date,dateString){
        console.log(date);
        console.log(dateString);
        let newAge='';
        if(dateString){
            let temp=((new Date()).getFullYear()-parseInt(dateString.substring(0,4))).toString();
            if(temp==='0'){newAge='不到一歲'}else{newAge=temp}
        }else{
            newAge='';
        }
        this.setState({
            age:newAge
        })
    }

    // 傳入事件對象，可以通過e.tartget獲得輸入的值
    // 此處注意，setstate後不能立即使用新的值，等這個塊完了之後，state纔會被重置
    handleChange2(e){
        console.log("e.target.value:"+e.target.value)
        let newAge=e.target.value.toString();
        this.setState({
            age:newAge
        })
        console.log("this.state.age"+this.state.age)
    }
    render(){
        return(
            <div>
                <span>出生日期</span>
                <DatePicker onChange={this.handleChange}></DatePicker>
                <span style={{marginLeft:"50px"}}>年齡</span>
                <input type="text" value={this.state.age} onChange={this.handleChange2} ></input>
                <span>{this.state.age}</span>
            </div>
        )
    }
}
export default AgeComputer

說明：這段代碼有一個問題，就是在handleChange2()中，把e.target.value傳入並設置給state後，在控制檯輸出e.target.value和this.state.age結果並不一樣，this.state.age輸出的是上一次change的結果。 是因爲handleChange2還沒有執行完，state還沒有設置，沒有生效。

3.兩種溫度轉換

兩個輸入框，一個輸入攝氏溫度，一個輸入華氏溫度，並且在其中一個輸入框輸入相應溫度時，另一個也會變化。並且輸出水在此溫度下是否會沸騰。

思路：一個父組件，包含兩個輸入框組件，輸入框一個是攝氏溫度，一個是華氏溫度。還有一個組件用於輸出水會不會沸騰，只需要通過props傳遞進去，判斷是否大於100即可。父組件管理數據狀態，state裏面只需要存儲溫度類型和數值，就可以計算出另一種類型的溫度。父組件把溫度值和溫度類型傳遞給輸入框子組件進行渲染。當輸入框中的內容變化，會觸發input的onchange事件，通過e.target.value可以設置新的值。子組件設置父組件中的值，也是父組件通過props傳遞的，把事件處理當作一個屬性即可。

1.子組件和父組件的通信問題

   父組件傳遞給子組件數據用props，子組件修改父組件的數據，可以通過父組件中的this.setState（組件中的state只能在本組件中修改）,只需要父組件把修改數據的事件當作屬性傳遞給子組件即可；

2.組件中的方法，一定要綁定到this,可以寫一個工具函數；

3.保留三位小數的方法

Math.round(floatNumber*1000)/1000;

4.只通過props獲取數據，沒有state的組件，可以使用無狀態組件，只進行頁面渲染。

父組件的代碼：Calculator

import React ,{Component} from 'react';
import TemperatureInput from './TemperatureInput';
import BoilingVerdict from './BoilingVerdict';

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();
}

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}/>
                {/* {celsius>=100 ? <p>the water would boil</p> :<p>the water would not boil.</p>} */}
                <BoilingVerdict celsius={parseFloat(celsius)} />
            </div>
        );
    }
    
}

export default Calculator;

子組件代碼：TemperatureInput

import React ,{Component} from 'react';


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

class TemperatureInput extends React.Component{
    constructor(props){
        super(props);
        this.handeleChange = this.handeleChange.bind(this);
    }

    handeleChange(e){
        
        this.props.onTemperatureChange(e.target.value);
    }

    render(){
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
            <fieldset>
                <legend>Enter temperature in {scaleNames[scale]}</legend>
                <input value={temperature} onChange={this.handeleChange}/>
            </fieldset>
        );
    }
}

export default TemperatureInput

    判斷水是否沸騰組件：

import React from 'react';

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

export default BoilingVerdict;