1
votes

Comment puis-je obtenir le texte / la valeur d'une entrée de texte par sa référence?

Chez mes parents, j'ai ce code:

Donc j'y rend mes entrées personnalisées de cette manière:

Mon doute est de savoir comment je peux accéder sur n'importe quelle partie de ce parent au texte de chaque entrée en utilisant la référence. Quelqu'un peut m'aider?

Le composant textinput:

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

react-native components

0 commentaires

4 Réponses :

0
votes

utilisez useRef () au lieu de createRef ();

const textInput = useRef(null);

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

1 commentaires

Il s'agit du contenu de référence utilisant "useRef": gist.github.com/ThallyssonKlein/… . Comment puis-je en obtenir le texte?

0
votes

Vous pouvez accéder à la référence via refContainerStep1.current .

Ce que vous pouvez alors faire est de vérifier la propriété Prototype pour vérifier quelles méthodes vous pouvez utiliser.

J'ai remarqué qu'il existe une fonction appelée _getText qui peut être utilisée pour obtenir une valeur.

Un exemple de saisie de la valeur dans un onPress: p >

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

1 commentaires

current._getText () n'existe pas pour moi, et c'est le retour de proto : gist.github.com/ThallyssonKlein/...

0
votes

Faites-le de cette façon

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;

Exemple dans l'expo

Parent

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,
  },

});

Enfant

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

1 commentaires

current.props n'existe pas pour moi. Il me semble que nos codes sont les mêmes, mais je vais essayer de vous montrer tout mon code parent: gist.github.com/ThallyssonKlein/...

0
votes

Je n'ai pas pu résoudre le problème, apparemment il n'y a aucun moyen d'obtenir cette propriété en pure React-Native.

J'ai donc commencé à utiliser le composant TextInput du paquet react-native-paper. De cette façon, le même code fonctionnait, je peux maintenant obtenir le texte avec cet extrait:

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

0 commentaires