react-native - React Native 如何在不使用 Redux 的情况下将值从组件传递到主要活动？

Question

我正在制作用于销售的上传产品。我已经制作了一个组件来接收用户输入的数字（单位或价格），并且在主页中需要计算总价格：单位*价格..但是，我被困在这里......我没有'不知道如何从组件中获取价值..

我附上了我的代码。你能看看吗？太感谢了 ！！

放置号码的组件

import React from 'react';
import { StyleSheet, View } from 'react-native'
import { TextInput } from 'react-native-gesture-handler';
import colors from '../config/colors';

function TryInputNum({children}) {
    return (
        <View style={styles.container}>
            <TextInput placeholder="Enter a number">{children}</TextInput>
        </View>
    );
}

const styles = StyleSheet.create({
    container :{
        width : 150,
        height : 200,
        backgroundColor : colors.white,
    }
})
export default TryInputNum;

主页

import React from 'react';
import { StyleSheet, View,Text } from 'react-native'
import TryInputNum from '../components/TryInputNum';
import colors from '../config/colors';

function TryCountScreen({children}) {
    return (
        <View style={styles.container}>
            <Text>{children}</Text>
           <TryInputNum/> 
        </View>
    );
}

const styles = StyleSheet.create({
    container : {
        flex :1,
        backgroundColor : colors.primary,
        justifyContent : 'center',
        alignItems : 'center',
    }
})
export default TryCountScreen;

标签： react-native

Answer 1

您可以从子级传递 onChangeText 函数，并将其作为主组件内的道具访问。在 onChangeText 中，您可以从 TextInput 组件返回文本值并在主组件内处理它。它会像这样

function TryInputNum({children,onChangeText}) {
return (
    <View style={styles.container}>
        <TextInput onChangeText={value => onChangeText(value)} placeholder="Enter a 
       number">{children}</TextInput>
    </View>
);
}

然后像这样处理来自主屏幕的值

import React from 'react';
import { StyleSheet, View,Text } from 'react-native'
import TryInputNum from '../components/TryInputNum';
import colors from '../config/colors';

function TryCountScreen({children}) {
    return (
        <View style={styles.container}>
            <Text>{children}</Text>
          //Here you have access to that text value thats written inside the
          // TextInput component
           <TryInputNum onChangeText={text => console.log(text)}/> 
        </View>
    );
}

const styles = StyleSheet.create({
    container : {
        flex :1,
        backgroundColor : colors.primary,
        justifyContent : 'center',
        alignItems : 'center',
    }
})
export default TryCountScreen;