TextInputsで本来の基本計算に反応します

Question

異なるTextInputを作成したいとします（例えば、2 Textinputs & b、1 Button、あらかじめ定義された計算a + b、出力feldなど）。下のボタンをクリックします。それを行う最善の方法は何ですか？

ありがとうございます。

Answer 1

あなたは次にあなたが入力値は、実際の数字と追加可能に変換可能であることを確認する必要があるだろう

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

のようなものを使用することができます。必要に応じてTextInputにkeyboardTypeを使用できます。例えば。 keyboardType="numeric"は負の数をサポートしません。