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