React Native 如何通过ref获取textinput的text / value?

cclgggtu  于 2023-05-18  发布在  React
关注(0)|答案(5)|浏览(186)

在我的父母中,我有这样的代码:

所以我在它里面渲染我的自定义输入,用这种方式:

我怀疑的是,我如何才能在这个父级的任何部分访问每个输入的文本使用ref。有人能帮我吗
textinput组件:
https://gist.github.com/ThallyssonKlein/4e054bc368ebc153fbf9222e304ff887

s4n0splo

s4n0splo1#

我无法解决这个问题,显然没有办法在纯React-Native中获得这个属性。
所以我开始使用react-native-paper包的TextInput组件。这样,相同的代码工作,我现在可以通过以下摘录获得文本:

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

643ylb082#

在react-native中,我们不能使用Ref获取TextInput的值。我使用了一个变通方法,因为我是动态生成TextInputs,
我在类的顶部创建了一个空数组作为global

this.textInputMessageRef = []

然后像下面这样捕获TextInput的值

onChangeText={(text) => this.textInputMessageRef[unique_id] = text}

然后在函数中你可以同样得到这个值

console.log(this.textInputMessageRef[unique_id])

希望它能帮助某人。

a9wyjsp7

a9wyjsp73#

使用useRef()代替createRef();

const textInput = useRef(null);

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

kmbjn2e34#

您可以通过refContainerStep1.current访问ref。
然后,您可以检查Prototype属性以检查可以使用哪些方法。
我注意到有一个名为_getText的函数可以用来获取一个值。
在onPress中抓取值的示例:

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

km0tfn4u5#

那样做

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;

相关问题