javascript - 如何将温度从摄氏度转换为华氏度？

问题描述

我的天气应用程序几乎完成了，只是无法将我的温度从摄氏温度转换为华氏温度。我制作了一个按钮并使用了一个事件处理程序来查看它是否有效，但是当我获取一个城市的 api 时，它显示了两种转换。此外，当我按下转换按钮时，它会使华氏温度消失（老实说希望这种情况发生但相反，所以它会在点击时弹出）。老实说，这是我需要做的最后一件事。

应用程序.js：

import React, { Component } from "react";
import Greeting from "./Greeting";

const API_key = "dsdfghjkjhgfd";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: "",
      country: undefined,
      weather: "",
      temp: "",
      fahr: true,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleConvert = this.handleConvert.bind(this);
    this.newTemp = this.newTemp.bind(this);
  }

  newTemp(temp) {
    let cell = Math.floor((temp * 9) / 5) + 32;
    return cell;
  }

  calCelsius(temp) {
    let cell = Math.floor(temp);
    return cell;
  }

  /*shouldComponentUpdate() {
        this.handleConvert();
    
    }*/

  handleConvert() {
    const { fahr } = this.state;
    this.setState({
      fahr: true,
    });
  }

  componentDidMount() {
    this.handleConvert();
  }

  handleChange(event) {
    const { name, value } = event.target;

    this.setState({ [name]: value });

    this.handleSubmit = async (e) => {
      e.preventDefault();
      const city = event.target.value;
      fetch(
        `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_key}`
      )
        .then((response) => response.json())
        .then((response) => {
          console.log(response);
          this.setState({
            city: `${response.name}`,
            country: `${response.sys.country}`,
            temp: this.calCelsius(`${response.main.temp}`),
            fahr: this.newTemp(`${response.main.temp}`),
            weather: `${response.weather[0].main}`,
          });
        });
    };
  }

  render() {
    let date = String(new window.Date());
    date = date.slice(0, 15);

    return (
      <div
        className={
          typeof this.state.weather != "undefined"
            ? this.state.temp > 16
              ? "app hot"
              : "app"
            : "app"
        }
      >
        <main>
          <div className="search-box">
            <form onSubmit={this.handleSubmit}>
              <input
                type="text"
                className="search-bar"
                placeholder="Enter a city"
                name="city"
                onChange={this.handleChange}
                value={this.state.value}
              />
            </form>
          </div>

          <div>
            <div className="location-box">
              <div className="location">
                {this.state.city},{this.state.country}{" "}
              </div>
              <div className="date">{date}</div>
              <div className="greet">
                <Greeting />
              </div>
              <div className="weather-box">
                <div className="temp">{this.state.temp}°C</div>
                <div className="fahr">{this.state.fahr}°F</div>
                <div className="weather">{this.state.weather}</div>
                <button onClick={this.handleConvert}>Convert Temp</button>
              </div>
            </div>
          </div>
        </main>
      </div>
    );
  }
}

export default App;

标签： javascriptreactjsonclickweather

javascript - 如何将温度从摄氏度转换为华氏度？

问题描述

解决方案

推荐阅读