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