如何通过 ref 获取 textinput 的文本/值？

Question

在我的父母中，我有以下代码：

所以我通过这种方式在其中呈现我的自定义输入：

我的疑问是如何使用 ref 在此父项的任何部分访问每个输入的文本。有人可以帮助我吗？

文本输入组件：

https://gist.github.com/ThallyssonKlein/4e054bc368ebc153fbf9222e304ff887

Answer 1

我无法解决问题，显然没有办法在纯 React-Native 中获取此属性。

所以我开始使用 react-native-paper 包的 TextInput 组件。这样，相同的代码就可以工作了，我现在可以通过以下摘录获取文本：

console.log(refContainerStep1.current.state.value);

Answer 2

使用 useRef() 代替 createRef();

const textInput = useRef(null);

<TextInput
   ref={textInput}
....../>

Answer 3

您可以通过refContainerStep1.current 访问参考。

然后您可以检查 Prototype 属性以检查您可以使用哪些方法。

我注意到有一个名为_getText 的函数可用于获取值。

在 onPress 中获取值的示例：

const onPress = () => { 
  console.log(refContainerStep1.current.__proto__); // See available methods
  console.log(refContainerStep1.current._getText()); // Grab the value
}

Answer 4

这样做

  const onButtonClick = () => {
      console.log('get value from parent')
      console.log(ref1.current.props.value)
      console.log(ref2.current.props.value)
  };

Example in expo

父母

import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-constants';

import MyTextInput from './components/AssetExample';

import { Card } from 'react-native-paper';

export default function App() {
  const ref1 = React.createRef();
  const ref2 = React.createRef();

  const onButtonClick = () => {
      console.log(ref1.current.props.value)
      console.log(ref2.current.props.value)
  };

  return (
    <View style={styles.container}>
      <Card>
      <button onClick={onButtonClick}>get value</button>
      <MyTextInput  label={'label 2'} secure={false}  ref={ref1} />
      <MyTextInput  label={'label 1'} secure={true}  ref={ref2} />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },

});

孩子

import React, { useState, useEffect } from 'react';
import { TextInput as RnTextInput, StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  textInput: {
    padding: 10,
    marginRight: 10,
    marginLeft: 10,
    borderRadius: 50,
  },
  text: {
    marginLeft: 20,
    marginBottom: 10,
    fontSize: 20,
  },
});

const TextInput = React.forwardRef((props, ref) => {
  const [text, setText] = useState('');
  return (
    <View>
      {props.label && <Text style={styles.text}>{props.label}</Text>}
      <RnTextInput
        style={styles.textInput}
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
        secureTextEntry={props.secure}
        ref={ref}
      />
    </View>
  );
});

export default TextInput;