时间戳

首页 > 解决方案 > 如何在视图中获取文本输入值？

react-native - 如何在视图中获取文本输入值？

问题描述

我正在研究 React Native，我是个初学者，如果我的问题特别简单，请提前道歉。

我正在视图（Home.Js）中工作，目前不在 App.Js 中。在这个主页视图中，我有一个文本输入（用户名），我想获取用户单击按钮时输入的值。我观看了解释视频，但他们解释了如何在 App.Js 中执行此操作，当我在我的视图中实现它时它不起作用。这是我的代码。谢谢

#Here We Are in my Home View (Home.Js) not App.Js

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

function Home(props) {

return (
    <View style={styles.container}>
        <View style={styles.header}>
            <Image source={require('../assets/logo.png')}
            style={styles.Logo}/>
            <Image source={require('../assets/Joiny.png')}
            style={styles.Logo}/>
        </View>
        <View style={styles.footer}>
            <TextInput>Username</TextInput>
        </View>

    </View>
);

};

标签： react-nativeviewtextinput

解决方案

试试这个方法

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

function Home(props) {

const [text, setText] = useState('');

return (
    <View style={styles.container}>
       ......
        <View style={styles.footer}>
            <TextInput onChangeText={text => setText(text)}>Username</TextInput>
        </View>
        <TouchableOpacity onPress={() => alert(TouchableOpacity)}>
            <TextInput onChangeText={text => setText(text)}>Username</TextInput>
        </TouchableOpacity>

    </View>
);
export default App;

推荐阅读