React 状态提升温度转换项目

最新推荐文章于 2023-06-03 12:36:46 发布

quitv

最新推荐文章于 2023-06-03 12:36:46 发布

阅读量170

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/quitv/article/details/119204261

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用create-react-app快速搭建React开发环境，无需复杂配置。创建的项目基于Webpack和ES6，包括两个温度输入组件，分别显示摄氏和华氏温度，并能进行转换。此外，还有一个BoilingVerdict组件判断水是否沸腾。博客通过示例展示了如何在React中实现温度转换和组件交互。

摘要由CSDN通过智能技术生成

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6

温度和类型是数据源

npm install -g create-react-app
create-react-app react
cd react 
npm start

import React, { Component } from "react";
import ReactDOM from "react-dom";
import './index.css'

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();//toString() 方法用于返回以一个字符串表示的 Number 对象值
}



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

const scaleNames = {
  c: '摄氏',
  f: '华氏'
};
class TemperatureInput extends Component{
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e){
    this.props.ononTemperatureChange(e.target.value);
  }
  render(){
    const temperature = this.props.temperature;
    const scale = this.props.scale;

    return(
      <fieldset>
        <legend>输入温度{scaleNames[scale]}: </legend>
        <input value = {temperature} onChange = {this.handleChange}/>
      
      </fieldset>
    )
  }
}

class  Calculator extends 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} ononTemperatureChange = {this.handleCelsiusChange} />
            <TemperatureInput scale = 'f' temperature = {fahrenheit} ononTemperatureChange = {this.handleFahrenheitChange}/>
            <BoilingVerdict celsius = {temperature}/>
        </div>
      )
    }

}

ReactDOM.render(
  <Calculator/>,
  document.getElementById("root"));