React Native使用forwardRef时input.current.value为undefined

React Native 内置TextInput组件的实例ref不存在value属性，这和Web DOM的input元素逻辑完全不同。你能正常调用focus()、clear()是因为这两个是RN官方为TextInput实例实现的内置方法，但输入过程中的文本内容不会自动挂载到ref的value字段上，直接读取自然返回undefined。

两种常规实现方案，根据业务场景选择即可：

方案1：受控组件（官方推荐写法） #

RN生态中绝大多数场景都用受控模式管理输入值，输入内容由React state统一托管，不需要从ref上读取：

• 父组件维护对应输入项的state，将state值和修改函数透传给自定义输入组件
• 需要取值时直接读取对应state变量即可，原有的ref调用focus、clear的逻辑完全不受影响

父组件修改示例：

import { useState, useRef } from 'react';
// 其余导入保持不变

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const emailFieldRef = useRef(null);

  const onLogin = () => {
    // 直接读取state中存储的输入值
    console.log('输入的邮箱内容：', email);
    // 原有ref方法调用逻辑不受影响
    // emailFieldRef.current?.focus();
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.form}>
        <AuthInput
          ref={emailFieldRef}
          label={'Email'}
          value={email}
          error={emailError}
          onChangeText={setEmail}
        />
        <StretchedButton title={'Sign in'} onPress={onLogin} />
      </View>
    </SafeAreaView>
  );
};

自定义AuthInput组件需要新增value属性透传：

const AuthInput = (
  {label = 'Label', isSecure = false, error = null, value, onChangeText},
  textRef,
) => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>{label}</Text>
      <TextInput
        ref={textRef}
        style={styles.input}
        secureTextEntry={isSecure}
        value={value}
        onChangeText={onChangeText}
      />
      {error && <Text style={styles.error}>{error}</Text>}
    </View>
  );
};

const forwaredInput = React.forwardRef(AuthInput);
export default forwaredInput;

方案2：自定义ref暴露取值方法（非受控场景适用） #

如果不想用受控模式，可以通过useImperativeHandle自定义ref对外暴露的能力，在组件内部维护输入值，对外提供取值方法：

修改自定义AuthInput组件：

import { useState, useImperativeHandle } from 'react';
// 其余导入保持不变

const AuthInput = (
  {label = 'Label', isSecure = false, error = null, onChangeText},
  textRef,
) => {
  const [innerValue, setInnerValue] = useState('');
  // 自定义ref对外暴露的属性和方法
  useImperativeHandle(textRef, () => ({
    // 保留原有的内置方法
    focus: () => textRef.current?.focus(),
    clear: () => {
      textRef.current?.clear();
      setInnerValue('');
    },
    // 新增getValue方法供外部读取当前输入值
    getValue: () => innerValue
  }), [innerValue]);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>{label}</Text>
      <TextInput
        ref={textRef}
        style={styles.input}
        secureTextEntry={isSecure}
        onChangeText={(text) => {
          setInnerValue(text);
          onChangeText?.(text);
        }}
      />
      {error && <Text style={styles.error}>{error}</Text>}
    </View>
  );
};

const forwaredInput = React.forwardRef(AuthInput);
export default forwaredInput;

父组件取值时调用自定义的getValue方法即可：

const onLogin = () => {
  console.log(emailFieldRef.current?.getValue());
};

内容的提问来源于stack exchange，提问作者Muhammad Haroon Iqbal