React Native 中的溫度計算器

Question

我正在嘗試開發一個基本的溫度計算，但我有點卡住了。 但是，我已經讓它有點工作了，每當單擊一個按鈕時，它們最終都會顯示結果（其中一個錯誤）和一個正確。 此外，文本和文本輸入同時更改。 請幫忙！

謝謝，

 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>
    )
}

}

Answer 1

您遇到問題是因為

updateState = () => this.setState ( {

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

您的初始攝氏度和華氏度為 0。

你在第一次輸入時填寫 50 攝氏度。 然后你按下按鈕然后你 function 呼叫。

它將攝氏度轉換為 122。 fahrenheit: (this.state.fahrenheit - 32) * 5 / 9這條線將 0 作為華氏度並計算為 -17.something。 它會更改變量的 state。 每當您按下按鈕時，它都會繼續播放。

嘗試將兩個公式分開在兩個不同的函數中。

試試這個我做了一些改變

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>
)
}
}