Las referencias, como su nombre indica, son una referencia a un nodo DOM (HTML o React) en el DOM actual. Aunque el caso de uso más común para el uso de Ref es la interacción con bibliotecas de terceros, nos centraremos en cómo se puede utilizar para modificar componentes hijos fuera del flujo de datos natural.
Supongamos que, en lugar de pasar el manejador de eventos para el cambio de entrada, queremos que nuestro componente de la aplicación obtenga directamente el valor de entrada de texto del componente hijo con sólo pulsar un botón. Esto es necesariamente una sobrecomplicación del escenario para la guía. Por lo tanto, la idea es crear una función en el SearchInputComponent que devuelva el valor de texto actual de la entrada. También usaremos Ref para tomar el valor de la entrada dentro del SearchInputComponent.
12345678910111213141516171819202122232425262728// SearchInputComponent.jsimportReactfrom$0027react$0027;classSearchInputComponentextendsReact.Componente{constructor(props){super(props);this. inputRef=React.createRef();}getInputValue(){returnthis.inputRef.value;}render(){return(<div><input type="text" ref={this.inputRef}/></div>)}}exportdefaultSearchInputComponent;javascript
En la modificación del SearchInputComponent anterior, puede observar cómo hemos utilizado una Ref para referirnos al elemento de entrada. En la función getInputValue(), accedemos a este elemento como si estuviéramos accediendo a un elemento DOM en Javascript (Nótese que la propiedad actual da acceso a la instancia del elemento). Esta es una forma de usar Ref.
Ahora modificaremos App para recoger el valor de entrada de SearchInputComponent.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546/// App.js// ...classAppextendsReact.Componente{constructor(props){super(props);esto. state={ results: listing, query:""}this.childRef=React.createRef();}doSearch=(query)=>{console.log(query);//come complex search goes here}onSearchClick=()=>{const query =this. childRef.current.getInputValue();console.log(query);}render(){return(<div><h2>ProductSearch</h2><SearchInputComponent onInputChange={this.onQueryChange} ref={this. childRef}/{this.onSearchClick={this.onSearchClick};Search</buttongdomgdomgdomgdomgdomgdom;SearchResultComponent results ={this.state.results}/{ndiv ]}}}exportdefaultApp;javascript
Aquí, estamos creando una referencia al SearchInputComponent que es un componente de React que un elemento HTML. Como estamos accediendo a la instancia actual del mismo, también obtenemos acceso a todos sus métodos y variables de instancia. Si se ejecuta el código anterior, se puede observar que, al hacer clic en el botón, App puede acceder al valor de entrada con éxito.
Nota
Al principio, puede que le intrigue la idea de los árbitros. Especialmente si vienes de un fondo de javascript vainilla. Esto se siente como tener un mejor control sobre los elementos. Pero el uso excesivo de los árbitros es altamente desaconsejado en la práctica de Reaccionar. Esencialmente anula el flujo natural de datos y puede tener efectos secundarios inesperados (cuando se combina con librerías de manipulación DOM de terceros). También, una cosa importante a recordar es que un componente de la función NO puede ser referido usando Refs. Dado que no poseen una instancia de corriente , como los componentes de la Clase, no se puede hacer referencia a ellos.