useSelect es un enlace personalizado proporcionado por el paquete Rooks para React. Es un gancho de selección de lista que ayuda a seleccionar valores de una lista.
Argumentos:
- list: Es del tipo array que describe la lista de elementos para la selección. El valor predeterminado no está definido.
- initialIndex -Es del tipo número que describe el índice seleccionado inicialmente. El valor predeterminado es 0.
Valor de retorno : objeto que contiene los siguientes atributos:
- index: Es del tipo int que describe el índice actualmente seleccionado.
- item : Denota el elemento actualmente seleccionado.
- setIndex: Es del tipo función que actualiza el índice.
- setItem: Es del tipo función que actualiza el ítem seleccionado.
Módulos Requeridos:
- npm
- crear-reaccionar-aplicacion
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-application demo
Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando:
cd demo
Paso 3: Instale Rooks desde npm.
npm i rooks
Abra la carpeta src y elimine los siguientes archivos:
- logotipo.svg
- setupTests.js
- Aplicación.prueba.js
- índice.css
- informeWebVitals.js
- aplicación.css
Estructura del proyecto: El proyecto debería verse así:
Ejemplo: Entendamos el uso de este gancho con un ejemplo de lista.
index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );
App.js
import React from "react"; import { useSelect } from "rooks"; const list = [ { heading: "Index 0", content: " GeeksForGeeks", }, { heading: "Index 1", content: "GFG", }, ]; function App() { const { index, setIndex, item } = useSelect(list, 0); return ( <div style={{ display: "flex", flexDirection: "column", margin: '20px' }}> <p style={{ color: '#c311d6', fontSize: '20px', margin: '10px', fontWeight: 'bold' }}>List Example</p> {list.map((listItem, listItemIndex) => ( <button key={listItemIndex} style={{ background: index === listItemIndex ? "#bdfca7" : "inherit", width: '300px', color: '#1c23a4', fontSize: '20px', margin: '10px' }} onClick={() => setIndex(listItemIndex)} > {listItem.heading} </button> ))} <p style={{ color: 'green', fontSize: '20px', margin: '10px', fontWeight: 'bold' }}>{item.content}</p> </div> ); } export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por tejaswaniagrawal23 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA