输入值仅在 React Native 中返回未定义答案

【问题标题】：Input Values Only Return Undefined in React Native输入值仅在 React Native 中返回未定义
【发布时间】：2020-07-16 16:43:08
【问题描述】：

我对本机反应非常陌生，并且正在尝试加载我的第一个基本应用程序的主页。目前，它要求用户输入他们的“姓名”和“净资产”，我只是想返回净值输入乘以一个常数，并在按下提交后出现一个警报，说“{name} +”净资产将是“+ { newNetworth} +“明年！”。但是现在我的输出是：“undefined will beworth undefined next year！”我无法弄清楚如何让实际值通过。

这是我的子组件：

    import React from 'react';
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';

class OpeningPageQs extends React.Component {
  
    
    state = {
    name: '',
    networth: 0,
    newNetworth: 0
}

nextYearWorth() { 
    

    this.setState({
        name: this.state.name,
        newNetworth: this.state.networth * 1.1
    });
return (alert(this.name + ' will be worth ' + this.newNetworth + ' next year!'));

}


    render (){
        

        return (
        <View>
            <TextInput style= { styles.input }
                placeholder= "name"
                onChangeText= { this.name }
            />

            <TextInput style= { styles.input }
                placeholder= 'networth'
                onChangeText= { this.networth }
            />

            <TouchableOpacity style = {styles.submitButton}
            onPress = {
                () =>  this.nextYearWorth(this.state.name, this.state.networth)
            }
            >
             
                <Text style={styles.submitButtonText}>
                Submit
                </Text>
                </TouchableOpacity> 
        </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 23
    },

    input: {
        margin: 15,
        height: 40,
        borderColor: '#7a42f4',
        borderWidth: 1
    },
    submitButton: {
        backgroundColor: '#7a42f4',
        padding: 10,
        margin: 15,
        height: 40,
     },
     submitButtonText: {
         color: 'white'
     }
})


export default OpeningPageQs;

这是我的父组件：

 import { StatusBar } from 'expo-status-bar';
import React, { useState, Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import OpeningPageQs from './components/OpeningPageQs';

    export default class App extends React.Component {
      constructor (props){
        super(props);
    
    //building initial state for input props
        this.state = {
        
          name: '',
          networth: this.networth 
        
    
        };   
    
      }
    
    
      render(){
      return (
        <View style={styles.container}>
          <StatusBar style="auto" />
          <OpeningPageQs 
          name={this.state.name}
          networth={this.state.networth}
           />
        </View>
      );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

任何帮助将不胜感激

【问题讨论】：

标签： javascript ios reactjs react-native use-state

【解决方案1】：

参考：https://reactnative.dev/docs/textinput

您错误地设置了状态。试试这样：

        <TextInput style= { styles.input }
           placeholder= "name"
           onChangeText={text => this.setState({name: text})}
        />

不只是为了显示结果而设置状态可能是值得的。您可以在 nextYearWorth 方法中创建局部变量，也可以在 onChangeText 回调中设置状态时将值倍增。

关于警报 - 请查看 Modal 组件：https://reactnative.dev/docs/modal#docsNav

【讨论】：

感谢您的评论。我想在这里设置状态的主要原因是我最终可以将“储蓄”和“理想增长率”作为输入变量添加到 nextYearWorth 方法中。我尝试实施适用于每个 TextInput 的更改，但仍然得到相同的输出。我可能只需要更多地阅读状态，并更全面地了解它使用的过程

【解决方案2】：

你可以这样使用。

<TextInput style= { styles.input }
    placeholder= "name"
    onChangeText= { text => this.name = text }
/>

【讨论】：