如何在React Native登录页面中获取RoundedTextField的输入文本

要实现这个功能，核心是把状态提升到父组件LoginScreen中，让父组件统一管理输入文本，子组件RoundedTextField只负责渲染和触发状态更新。具体修改如下：

修改后的完整代码 #

LoginScreen 组件 #

import { useState } from 'react';
import { View, Text, Image } from 'react-native';
import Screen from './Screen';
import RoundedTextField from './RoundedTextField';

export default function LoginScreen() {
  // 父组件维护输入文本的状态
  const [mobileNumber, setMobileNumber] = useState("");

  return (
    <Screen>
      <View style={styles.containerView}>
        <Text style={styles.headerText}>LOGIN</Text>
        <Image
          style={styles.logoStyle}
          source={require("../assets/logo.png")}
        />
        {/* 把状态值和更新方法传给子组件 */}
        <RoundedTextField 
          placeholder="Mobile Number" 
          value={mobileNumber}
          onChangeText={setMobileNumber}
        />
        {/* 直接展示父组件中的状态值 */}
        <Text>{mobileNumber}</Text>
      </View>
    </Screen>
  );
}

// 样式示例，可根据实际需求调整
const styles = {
  containerView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  headerText: {
    fontSize: 24,
    fontWeight: 'bold'
  },
  logoStyle: {
    width: 100,
    height: 100,
    marginVertical: 20
  }
};

RoundedTextField 组件 #

import { TextInput } from 'react-native';

export default function RoundedTextField({ placeholder, value, onChangeText }) {
  // 不再内部维护状态，直接使用父组件传入的props
  return (
    <TextInput
      style={styles.textInput}
      placeholder={placeholder}
      onChangeText={onChangeText}
      value={value}
    />
  );
}

// 样式示例，可根据实际需求调整
const styles = {
  textInput: {
    width: '80%',
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 20,
    paddingHorizontal: 15,
    marginVertical: 10
  }
};

关键修改说明 #

• 状态提升：把原本在RoundedTextField内部的输入状态，移到父组件LoginScreen中，这样父组件可以直接访问并展示输入内容。
• Props传递：父组件将状态值和状态更新方法通过props传给子组件，子组件的TextInput直接使用这两个props来控制输入内容、响应输入变化。
• 受控组件：修改后的RoundedTextField成为受控组件，输入内容完全由父组件状态控制，保证了数据的一致性。

内容的提问来源于stack exchange，提问作者Prashant