En este artículo, vamos a agregar una función adicional al botón Borrar de la función Autocompletar de la interfaz de usuario del material. Tome como referencia el botón Borrar en el código y luego agregue un detector de eventos de clic en él.
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: Instale los módulos requeridos
npm install @material-ui/core npm install @material-ui/lab
Estructura del proyecto:
Ejemplo : 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.
App.js
import React,{ Component } from 'react'; import TextField from "@material-ui/core/TextField"; import Autocomplete from "@material-ui/lab/Autocomplete"; class App extends Component { constructor(props) { super(props); this.state = { list: [ { title: "Title 1"}, { title: "Title 2"}, { title: "Title 3"}, { title: "Title 4"}, ] } } componentDidMount(){ // Take the Reference of Close Button const close = document.getElementsByClassName( "MuiAutocomplete-clearIndicator" )[0]; // Add a Click Event Listener to the button close.addEventListener("click", () => { alert("Add your Own Functionality Here..."); }); } render() { return ( <Autocomplete options={this.state.list} getOptionLabel={(option) => option.title} style={{ width: 300 }} renderInput={(params) => ( <TextField {...params} label="Combo box" variant="outlined" /> )} /> ); } } 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 pratikraut0000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA