从反应的输入字段获取用户输入，类似于使用props在反应本机中的getElementById

我正在做一个贷款计算应用程序，由于遇到了本机反应，我遇到了麻烦，以前我一直在使用querySelector或getElementById函数操作DOM。但这在反应中不起作用，我正在使用状态来存储用户的值，但我似乎无法正确地做到这一点，我在做什么错？

我插入了稍后在app.js中呈现的计算元素。所有元素都正确显示，但问题是获取用户输入数据，然后能够使用该数据进行计算。

这是我的课

class LanKalkylElement extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        loanAmount: 20000,
        loanInterest: 2.5,
        loanYear: 10,
    };
  }

  changeAmount(loanAmount) {
    this.setState(() => {
      return {
        loanAmount: parseFloat(loanAmount),
      };
    });
  }

  changeInterest(loanInterest) {
    this.setState(() => {
      return {
        loanInterest: parseFloat(loanInterest),
      };
    });
  }

  changeYear(loanYear) {
    this.setState(() => {
      return {
        loanYear: parseFloat(loanYear),
      };
    });
  }

calcButton() {
    Alert.alert(this.props.loanAmount);
}

buttonHomeFunc() {
    this.props.navigation.navigate('Start');
}

render() {
    const {loanAmount, loanInterest, loanYear} = this.state;
    return(
        <View  style={styles.contentStyle}>

            <Text style={styles.text}> Lånebelopp </Text>
            <TextInput  style={styles.numericInput}
                        onBlur={Keyboard.dismiss}
                        keyboardType={'numeric'}
                        value={loanAmount}
                        onValueChange={this.changeAmount.bind(this)} />

            <Text style={styles.text}> Ränta </Text>
            <TextInput  style={styles.numericInput}
                        onBlur={Keyboard.dismiss}
                        keyboardType={'numeric'}
                        value={loanInterest}
                        onValueChange={this.changeInterest.bind(this)} />

            <Text style={styles.text}> Antal år: {String(loanYear)}</Text>
            <Slider step={1}
                    maximumValue={15}
                    value={loanYear}
                    onValueChange={this.changeYear.bind(this)} />

            <Button title='Kalkylera' onPress={() => this.calcButton()}/>
            <Text style={styles.textResult}>Total summa att återbetala:</Text>
            <Text style={styles.textResult}>varav räntekostnad:</Text>
            <Button title='Tillbaka' onPress={() => this.buttonHomeFunc()}/>

        </View>   
    )
}
}
export default withNavigation(LanKalkylElement);