当从onPress内部的条件语句调用函数时，React native显示NaN为空

Question

函数isEmpty不起作用，当从onPress内部的条件语句调用函数时显示NaN为空。函数handleResulte正在工作，但isEmpty没有。

我是React Native的新手，使用youtube和Udemy从教程中学习。

为空

state = {
num1: '',num2: ''
}
inp1 = 0; inp2 = 0; 
handleNum1 = (text) => {
this.inp1 = parseInt(text);
}
handleNum2 = (text) => {
this.inp2 = parseInt(text);
}
handleResulte = () => {
this.setState({
num1: (this.inp1/(100+6)*(this.inp2/100)*(100-20)).toFixed(0)
})
this.setState({
num2: (this.inp1/(100+6)*(this.inp2/100)*100).toFixed(0)
})
}
isEmpty = () => { 
this.setState({
num1: 'is Empty'
}) 
this.setState({
num2: 'is Empty'
})}
render() {
return (
<View style={styles.flexBox}>
<View style={styles.inpBox}>
<TextInput
style={styles.inps}
placeholder="Num1"
keyboardType="numeric"
onChangeText={this.handleNum1}
/>
<TextInput
style={styles.inps}
placeholder="Num2"
keyboardType="numeric"
onChangeText={this.handleNum2}
/>       
</View>
<View style={styles.butBox}>
<TouchableOpacity
style = {styles.btn}
onPress={() => {
if (!this.state.num1){ this.isEmpty()} 
else {this.handleResulte()}
}}>
<Text style = {styles.btnText}>Press me</Text>
</TouchableOpacity> 
</View>
<View style={styles.resulteBox}>
<Text style = {styles.boxText}>
{this.state.num1}
</Text>
<Text style = {styles.boxText}>
{this.state.num2}
</Text>               
</View>
</View>
);
}
}

Answer 1

对空字符串运行parseInt将得到NaN(不是数字)。

将inp1和inp2保存为类的实例变量也是不好的做法。保持它们的状态会在它们改变时通知React重新渲染。

我将把inp1和inp2保持为字符串状态(因为它们来自文本输入)，然后扩展handleResulte方法来处理空情况。你不需要isEmpty方法。(你也可以在每次setState调用中设置多个状态键。)

你应该首先在类的构造函数中设置你的状态。

constructor() {
this.state = {
input1: '',
input2: '',
result1: 'is Empty',
result2: 'is Empty'
}
}

然后你可以展开handleResulte来处理空情况。

handleResulte() {
const parsedInput1 = parseInt(this.state.input1);
const parsedInput2 = parseInt(this.state.input2);
// set results to empty if inputs are NaN or zero
if (!parsedInput1 || !parsedInput2) {
this.setState({ result1: 'is Empty', result2: 'is Empty' });
return;
}
this.setState({
result1: // your math
result2: // your math
})
}

你可以告诉你的输入将它们的文本直接存储在inp1和inp2中。

<TextInput
...
onChangeText={text => this.setState({ inp1: text })}
/>
<TextInput
...
onChangeText={text => this.setState({ inp2: text })}
/>

然后，在按钮中，您可以简单地调用handleResulte:

...
<TouchableOpacity
style={styles.btn}
onPress={this.handleResulte}
>
...

完整修订的代码如下。让我知道这是否有意义。

constructor() {
this.state = {
inp1: '',
inp2: '',
num1: 'is Empty',
num2: 'is Empty'
}
}
handleResulte() {
const parsedInp1 = parseInt(this.state.inp1);
const parsedInp2 = parseInt(this.state.inp2);
// set results to empty if inputs are not a number or zero
if (!parsedInp1 || !parsedInp2) {
this.setState({ num1: 'is Empty', num2: 'is Empty' });
return;
}
this.setState({
num1: (parsedInp1 / (100 + 6) * (parsedInp2 / 100) * (100 - 20)).toFixed(0),
num2: (parsedInp1 / (100 + 6) * (parsedInp2 / 100) * 100).toFixed(0)
})
}
render() {
return (
<View style={styles.flexBox}>
<View style={styles.inpBox}>
<TextInput
style={styles.inps}
placeholder="Num1"
keyboardType="numeric"
onChangeText={text => this.setState({ inp1: text })}
/>
<TextInput
style={styles.inps}
placeholder="Num2"
keyboardType="numeric"
onChangeText={text => this.setState({ inp2: text })}
/>
</View>
<View style={styles.butBox}>
<TouchableOpacity
style={styles.btn}
onPress={this.handleResulte}
>
<Text style={styles.btnText}>Press me</Text>
</TouchableOpacity>
</View>
<View style={styles.resulteBox}>
<Text style={styles.boxText}>
{this.state.num1}
</Text>
<Text style={styles.boxText}>
{this.state.num2}
</Text>
</View>
</View>
);
}

Answer 2

我找到了答案，整个代码将

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

export default class Counter1 extends React.Component {

state = {
input1: '',
input2: '',
input3: '',
input4: '',
resulte1: '',
resulte2: '',
resulte3: '',
resulte4: ''
}

handleResulte() {
const parsedInput1 = parseInt(this.state.input1);
const parsedInput2 = parseInt(this.state.input2);
const parsedInput3 = parseInt(this.state.input3);
const parsedInput4 = parseInt(this.state.input4);
// set results to empty if inputs are not a number or zero
if (!parsedInput1 || !parsedInput2 || !parsedInput3 || !parsedInput4) {
this.setState({ resulte1: 'Fill in all the boxes' });
return;
}

this.setState({
resulte1: (parsedInput1 / (100 + parsedInput4) * (parsedInput2 / 100) * (100 - parsedInput3)).toFixed(0),
resulte2: (parsedInput1 / (100 + parsedInput4) * (parsedInput2 / 100) * 100).toFixed(0),
resulte3: (parsedInput1 / (100 + parsedInput4) * (parsedInput2 / 100) * parsedInput3).toFixed(0),
resulte4: (parsedInput1 / (100 + 6) * (100 / 100) * parsedInput4).toFixed(0),
})
}

render() {
return (
<View style={styles.flexBox}>
<View style={styles.inputBox}>
<TextInput
style={styles.inputs}
placeholder="Num1"
keyboardType="numeric"
onChangeText={text => this.setState({ input1: text })}
/>
<TextInput
style={styles.inputs}
placeholder="Num2"
keyboardType="numeric"
onChangeText={text => this.setState({ input2: text })}
/>
<TextInput
style={styles.inputs}
placeholder="Num3"
keyboardType="numeric"
onChangeText={text => this.setState({ input3: text })}
/>
<TextInput
style={styles.inputs}
placeholder="Num4"
keyboardType="numeric"
onChangeText={text => this.setState({ input4: text })}
/>
</View>
<View style={styles.butBox}>
<TouchableOpacity
style = {styles.btn}
onPress={()=>this.handleResulte()}>
<Text style = {styles.btnText}>Calculate</Text>
</TouchableOpacity> 
</View>
<View style={styles.resulteBox}>
<Text style = {styles.boxText}>
{this.state.resulte1}
</Text>
<Text style = {styles.boxText}>
{this.state.resulte2}
</Text>
<Text style = {styles.boxText}>
{this.state.resulte3}
</Text>
<Text style = {styles.boxText}>
{this.state.resulte4}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
flexBox: {
alignItems: 'center',
paddingHorizontal: 10,
backgroundColor:'ededed',
flexDirection: 'column',
flex: 1,
},

inputBox: {
marginTop: 40,
flexDirection: "row",
justifyContent: 'space-between',
alignItems: 'center',
flex: 1,
},
inputs: {
width: "20%",
height: 50,
textAlign: "center",
backgroundColor:'white',
marginRight: 10,
borderRadius: 20,
},

butBox: {
width: "80%",
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 10,
flex: 1,
},
btn: {
width: 300,
alignItems: "center",
backgroundColor: "#2196F3",
padding: 10,
marginVertical: 10,
borderRadius: 20,
},
btnText: {
fontSize: 16,
color: 'white',
},
resulteBox: {
width: '80%',
alignItems: 'center',
flex: 4,
},
boxText: {
fontSize: 32,
padding: 20,
}
});