Reactive native Grundberechnung mit TextInputs

Question

Ich möchte verschiedene TextInputs erstellen (zB 2 Textinputs a & b, 1 Button, dann vordefinierte Berechnung zB a + b, ein Outputfeld) dann etwas mit ihnen berechnen und dann nach Drücken von a ausgeben Knopf unter. Wie ist der schnellste Weg?

Vielen Dank.

Answer 1

Sie können so etwas wie

constructor(props) { 
    super(props); 

    this.state = { 
    firstValue: '', 
    secondValue: '', 
    sum: 0 
    }; 
} 

calculateSum =() => { 
    const { firstValue, secondValue } = this.state; 

    this.setState({ 
    sum: Number(firstValue) + Number(secondValue) 
    }); 
} 

render() { 
    return (
    <View> 
     <TextInput 
     value={this.state.firstValue} 
     onChangeText={(firstValue) => this.setState({firstValue})} 
     /> 

     <TextInput 
     value={this.state.secondValue} 
     onChangeText={(secondValue) => this.setState({secondValue})} 
     /> 

     <TouchableHighlight onPress={this.calculateSum}> 
     <Text>Calculate</Text> 
     </TouchableHighlight> 

     <Text>{`Sum ${this.state.sum}`}</Text> 
    </View> 
); 
} 

verwenden Dann würden Sie überprüfen müssen, dass die Eingangswerte sind tatsächlich konvertierbar zu Zahlen und addable. Sie können keyboardType für TextInput je nach Bedarf verwenden. Z.B. keyboardType="numeric" unterstützt keine negativen Zahlen.