【20】前端實習：react官方文檔練習（狀態提升/ {溫度計例子}）

【溫度計】

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

function Water(props) {
 if(props.waterstate >100) {
   return (
     <h1>水開了</h1>
   )
 }else {
   return (
     <h1>水的溫度沒有達到100度</h1>
   )
 }
}


class ShowIt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    })
  }

  render() {
    return (
      <fieldset>
        <legend>現在的水溫是多少？</legend>
        <input type="text" value={this.state.value} onChange={this.handleChange}></input>
        <Water waterstate={parseFloat(this.state.value)}></Water>
      </fieldset>
    );
  }


}

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

serviceWorker.unregister();

TIP：

JavaScript parseFloat() 函數

parseFloat() 函數可解析一個字符串，並返回一個浮點數。

該函數指定字符串中的首個字符是否是數字。如果是，則對字符串進行解析，直到到達數字的末端爲止，然後以數字返回該數字，而不是作爲字符串。

JavaScript round() 方法

JavaScript Math 對象

 

 

【共享狀態】

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


const estate ={
  cels: '攝氏度',
  huaer: '華氏度'
}
// 將華氏度換算成攝氏度
function cvCels(cvHuaer) {
  return ( cvHuaer - 32) * 5 / 9;
}
// 將攝氏度換算成華氏度
function cvHuaer(cvCels) {
  return ( cvCels * 9 / 5) + 32;
}

// 換算出來的結果
function toConvert(value,func) {
  const input = parseFloat(value);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = func(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function ShowWaterState(props) {
  if(props.waterNum > 99) {
    return(
      <h1>水開了</h1>
    )
  }else {
    return (
    <h1>燒水的溫度不夠</h1>
    )
  }
}

class WaterInput extends Component {
  constructor(props) {
    super(props);
    this.setState = {
    }
    this.handleInputChange = this.handleInputChange.bind(this)
  } 

  handleInputChange(e) {
    this.props.bindhandleInputChange(e.target.value)
  }
  render() {
    const inputEstate = this.props.inputEstate
  return (
    <fieldset>
      <legend>有多少{estate[inputEstate]}:</legend>
      <input type="text" value={this.props.value} onChange={this.handleInputChange}></input>
    </fieldset>
  )
  }
}

class Temperature extends Component {
  constructor(props) {
    super(props);
    this.state= {
      value: '',
      inputEstate: 'cels'
    }
    this.handleShowChangeCels = this.handleShowChangeCels.bind(this);
    this.handleShowChangeHuaer = this.handleShowChangeHuaer.bind(this);
  }

  // 自定義的參數名userinputvalue，就是 從WaterInput組件傳過來的e.target.value這個值
  handleShowChangeCels(userinputvalue) {
    this.setState({
      inputEstate: 'cels',
      value: userinputvalue
    })
  }
  handleShowChangeHuaer(userinputvalue) {
    this.setState({
      inputEstate: 'huaer',
      value: userinputvalue
    })
  }

  render() {
    const inputEstate = this.state.inputEstate
    const value = this.state.value
    const ValueCels = inputEstate === "cels" ?  value :toConvert(value,cvCels)
    const ValueHuaer = inputEstate === "Huaer" ? value : toConvert(value,cvHuaer)
    return(
      <div>
        {/* 攝氏度 */}
        <WaterInput 
        inputEstate = "cels"
        value={ValueCels} 
        bindhandleInputChange={this.handleShowChangeCels}
        ></WaterInput>
        {/* 華氏度 */}
        <WaterInput 
        inputEstate = "huaer"
        value={ValueHuaer}
        bindhandleInputChange={this.handleShowChangeHuaer}
        ></WaterInput>
        <ShowWaterState waterNum={parseFloat(ValueCels)}></ShowWaterState>
      </div>
    );
  }
}

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

serviceWorker.unregister();