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

Posted 2023-02-23

【中文标题】如何通过 ref 获取 textinput 的文本/值？

【英文标题】：How can I get the text / value of a textinput by its ref?

【发布时间】：2020-09-07 17:33:33

【问题描述】：

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

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

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

文本输入组件：

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

【参考方案1】：

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

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

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

【参考方案2】：

使用 useRef() 代替 createRef();

const textInput = useRef(null);

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

【讨论】：

这是使用“useRef”的参考内容：gist.github.com/ThallyssonKlein/…。我怎样才能得到它的文本？

【参考方案3】：

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

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

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

在 onPress 中获取值的示例：

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

【讨论】：

current._getText() 对我来说不存在，这是 proto 的返回：gist.github.com/ThallyssonKlein/…

【参考方案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;

【讨论】：

current.props 对我来说不存在。在我看来，我们的代码是相同的，但我会尝试向您展示我所有的父代码：gist.github.com/ThallyssonKlein/…