时间戳

首页 > 解决方案 > React Native 中的温度计算器

javascript - React Native 中的温度计算器

问题描述

我正在尝试开发一个基本的温度计算，但我有点卡住了。但是，我已经让它有点工作了，每当单击一个按钮时，它们最终都会显示结果（其中一个错误）和一个正确。此外，文本和文本输入同时更改。请帮忙！

谢谢，

 import React, {Component} from 'react';
 import { TextInput,View, Text, Button, StyleSheet } from 'react-native';

 export default class App extends React.Component {

 state = {
    celsius: 0,
    fahrenheit: 0,    
}
updateState = () => this.setState ( {

    celsius: (this.state.celsius * 9/5) + 32,
    fahrenheit: (this.state.fahrenheit - 32) * 5 / 9
})   
render() {
    const  { celsius, fahrenheit } = this.state

    return (
        <View style={styles.container}>

            <h1> Temperature Converter</h1>

            <TextInput
            value={this.state.celsius}
            onChangeText={ (celsius) => this.setState({ celsius })}
            placeholder={'Celsius Here'}
            style={styles.input}
            />
            <Text style={styles.input}> {celsius} </Text>

            <Button onPress = { () => { this.updateState()}} title="Convert Celsius" />

            <Text>{"\n"}</Text>

            <TextInput
            value={this.state.fahrenheit}
            onChangeText={ (fahrenheit) => this.setState({fahrenheit})}
            placeholder={'Fahrenheit Here'}
            style={styles.input}
            />
            <Text style={styles.input}> {fahrenheit} </Text>

            <Button onPress = { () => {this.updateState()}} title="Convert Fahrenheit" />

          </View>
    )
}

}

标签： javascripthtmlreactjsreact-native

解决方案

您遇到问题是因为

updateState = () => this.setState ( {

celsius: (this.state.celsius * 9/5) + 32,
fahrenheit: (this.state.fahrenheit - 32) * 5 / 9
})

您的初始摄氏度和华氏度为 0。

你在第一次输入时填写 50 摄氏度。然后你按下按钮然后你调用函数。

它将摄氏度转换为 122。 fahrenheit: (this.state.fahrenheit - 32) * 5 / 9这条线以 0 为华氏度并计算为 -17.something。它会改变变量的状态。每当您按下按钮时，它都会继续播放。

尝试将两个公式分开在两个不同的函数中。

试试这个我做了一些改变

import React, {Component} from 'react';
 import { TextInput,View, Text, Button, StyleSheet } from 'react-native';

export default class App extends React.Component {

 state = {
celsius: null,
fahrenheit: null,  
celsius1: null,
fahrenheit1: null,   
}
 updateState = () => this.setState ( {

fahrenheit: (this.state.celsius * 9/5) + 32,
//fahrenheit: (this.state.fahrenheit - 32) * 5 / 9
 })  
 updateState1 = () => this.setState ( {

//celsius: (this.state.celsius * 9/5) + 32,
celsius1: (this.state.fahrenheit1 - 32) * 5 / 9
  })  
 render() {
const  { celsius, fahrenheit, celsius1, fahrenheit1 } = this.state

return (
    <View style={styles.container}>

        {/* <h1> Temperature Converter</h1> */}

        <TextInput
        value={this.state.celsius}
        onChangeText={ (celsius) => this.setState({ celsius })}
        placeholder={'Celsius Here'}
        style={styles.input}
        />
        <Text style={styles.input}> {fahrenheit} </Text>

        <Button onPress = { () => { this.updateState()}} title="Convert Celsius to Fahrenheit" />

        <Text>{"\n"}</Text>

        <TextInput
        value={this.state.fahrenheit1} 
        onChangeText={ (fahrenheit1) => this.setState({fahrenheit1})}
        placeholder={'Fahrenheit Here'}
        style={styles.input}
        />
        <Text style={styles.input}> {celsius1} </Text>

        <Button onPress = { () => {this.updateState1()}} title="Convert Fahrenheit to celsius" />

      </View>
)
}
}

推荐阅读