Opción de selección automática del menú desplegable en ReactJS

La opción de selección automática del menú desplegable significa que sin obligar al usuario a hacer clic en ninguna opción, el valor de la opción se completa automáticamente. disponible seleccione automáticamente las opciones de Dropdown usando el siguiente enfoque.

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-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Paso 3: después de crear la aplicación ReactJS, instale los módulos material-ui usando el siguiente comando:

npm install @material-ui/core
npm install @material-ui/lab

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
  
const App = () => {
  
  // Sample options for dropdown
  const myOptions = ['One', 'Two', 'Three', 'Four', 'Five'];
  
  return (
    <div style={{ marginLeft: '40%', marginTop: '60px' }}>
      <h3>Greetings from GeeksforGeeks!</h3>
      <Autocomplete
        style={{width:500}}
        autoSelect
        options={myOptions}
        renderInput={(params) => (
          <TextField {...params}
            variant="outlined"
            label="AutoSelect Dropdown"
           />
        )}
      />
    </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:

Ahora sobre cualquier opción y haga clic fuera del menú desplegable, el valor de la opción se completará automáticamente. Así es como funciona la selección automática en ReactJS para el menú desplegable.