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

Posted 2023-03-14

【中文标题】输入值仅在 React Native 中返回未定义

【英文标题】：Input Values Only Return Undefined in 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',
      ,
    );

任何帮助将不胜感激

【参考方案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 
/>