Получить пользовательский ввод из поля ввода в реагировать аналогично getElementById в реагировать родной с помощью реквизита

Question

Я работаю с приложением для расчета кредита и столкнулся с проблемой, поскольку я новичок в реагировании на нативную систему, а ранее я манипулировал DOM с помощью функций querySelector или getElementById. Однако это не работает в реакции, и я использую состояние для хранения значения от пользователя, но я просто не могу понять, правильно ли, что я делаю неправильно?

Я вставил элемент вычисления, который позже отображается в приложении. 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);

Answer 1

Когда пользователь изменяет значение в текстовом вводе, вызывается onValueChange. Вы привязали эту опору к функциям, которые изменяют состояние для этого компонента.

Это означает, что значение в текстовом вводе всегда будет соответствовать значению в состоянии. Поэтому, если вам нужно получить доступ к значению в текстовом вводе, вы просто извлечете его из состояния, например:

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