Réagir la référence multiple native au composant global

Question

Je souhaite créer plusieurs références au même composant global. Comme par exemple TextInput, si je veux y ajouter une référence, j'utilise. ceci dans mon composant basé sur la classe:

 <TextInput
               
                  ref={input => {
                    this.secondTextInput = input;
                  }}
                
                />

puis appelez via this.secondTextInput.focus();pour focaliser l'entrée de texte. Cela fonctionne tant que j'importe tout le textInput directement dans ma classe.

De même si ive a créé un composant global pour TextInput dans un autre fichier comme:

export const OTPInput = props => {
  return (
    
      <TextInput
        placeholder={props.title}
        onChangeText={props.onTextEnter}
        value={props.value}
      
      />
   
  );
};

et en utilisant ceci dans mes classes en important comme:

Class ABC extends Component{


render(){
return(
<>
<OTPInput title ="first otp" />
<OTPInput title ="another otp" />
</>
)

}

}

Comment puis-je créer une référence et la transmettre, afin de pouvoir concentrer l'entrée de texte en cliquant sur un bouton dans ma classe func.

Toute aide serait formidable

Answer 1

Renvoi des références

export const OTPInput = React.forwardRef((props, ref) => (
  <TextInput
    ref={ref}
    placeholder={props.title}
    onChangeText={props.onTextEnter}
    value={props.value}  
  />
));

Ensuite, selon votre exemple d'utilisation, créez simplement une référence et attachez-la

const OTPInputRef1 = React.createRef();

...

<OTPInput ref={OTPInputRef1} title ="first otp" />

Answer 2

Vous devriez jeter un oeil aux références de transfert décrites ici dans les documents de réaction https://reactjs.org/docs/forwarding-refs.html