React Native如何将自定义TextInput组件的state作为props传递给父组件

有两种常用方式可以实现父组件访问子组件的输入状态，优先推荐第一种状态提升方案，符合React单向数据流设计规范。

方案1：状态提升（推荐） #

将输入框的状态从子组件迁移到父组件App.js中维护，子组件通过props接收状态值和更新方法，仅做渲染层逻辑。

修改后的TextInputComponent.js代码 #

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

const TextInputComponent = (props) => {
    return (
    <View>
      <TextInput 
        style={styles.container} 
        value={props.value} 
        onChangeText={props.onChangeText} 
        placeholder="Enter"
      />
    </View>
    )
}

const styles = StyleSheet.create({
    container: {
      height: 50,
      width: 200,
      padding: 10,
      margin: 10,
      borderWidth: 1,
      borderColor: "black",
      backgroundColor: '#fff',
    },
  });
  
export default TextInputComponent

修改后的App.js代码 #

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

export default function App() {
  // 父组件统一维护输入框状态
  const [inputText, setInputText] = useState("")

  return (
    <View style={styles.container}>
    <View style={{flexDirection: 'row', alignItems: 'center' }}>
    <Text>Test</Text>
    <TextInputComponent value={inputText} onChangeText={setInputText}/>
    <Button title="A" onPress={()=> console.log(inputText)} />
    </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

方案2：useImperativeHandle暴露方法（适合独立组件封装） #

如果需要将状态保留在子组件内部，可以通过forwardRef+useImperativeHandle的组合，给父组件暴露获取子组件状态的方法。

修改后的TextInputComponent.js代码 #

import React, {useState, forwardRef, useImperativeHandle} from 'react';
import { StyleSheet, View, TextInput } from 'react-native'

const TextInputComponent = forwardRef((props, ref) => {
  const [text, onChangeText] = useState("")

  // 对外暴露获取输入值的方法
  useImperativeHandle(ref, () => ({
    getInputValue: () => text
  }))

  return (
    <View>
      <TextInput 
        style={styles.container} 
        value={text} 
        onChangeText={onChangeText} 
        placeholder="Enter"
      />
    </View>
  )
})

const styles = StyleSheet.create({
    container: {
      height: 50,
      width: 200,
      padding: 10,
      margin: 10,
      borderWidth: 1,
      borderColor: "black",
      backgroundColor: '#fff',
    },
  });
  
export default TextInputComponent

修改后的App.js代码 #

import { StatusBar } from 'expo-status-bar';
import React, {useRef} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import TextInputComponent from './src/components/TextInputComponent';

export default function App() {
  // 创建ref绑定子组件实例
  const inputRef = useRef(null)

  return (
    <View style={styles.container}>
    <View style={{flexDirection: 'row', alignItems: 'center' }}>
    <Text>Test</Text>
    <TextInputComponent ref={inputRef}/>
    <Button title="A" onPress={()=> console.log(inputRef.current?.getInputValue())} />
    </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

方案选择建议 #

• 常规业务场景优先使用方案1，数据流清晰，后续调试、维护成本更低
• 方案2仅适合封装完全独立的通用组件，不需要父组件干预内部状态的场景

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