从输入字段中获取用户输入，类似于 getElementById 在 react native using props 中的反应

Question

我正在做一个贷款计算应用程序，我运行遇到了麻烦，因为我是 React Native 的新手，之前我一直在使用 querySelector 或 getElementById 函数来操纵 DOM。然而，这在反应中不起作用，我正在使用状态来存储来自用户的值，但我似乎无法正确处理，我做错了什么？

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

Here is my Class

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

Answer 1

当用户更改文本输入中的值时，将调用 onValueChange。您已将此道具绑定到修改此组件状态的函数。

这意味着文本输入中的值将始终与状态中的值匹配。因此，如果您需要访问文本输入中的值，您只需从状态中检索它，如下所示：

const loanAmount = this.state.loanAmount;
doSomethingWithLoanAmount(loanAmount);

从输入字段中获取用户输入，类似于 getElementById 在 react native using props 中的反应

Get user input from input field in react similar to getElementById in react native using props

state

react-native

react-props