Как добавить функцию к значку кнопки очистки в автозаполнении пользовательского интерфейса материала?
В этой статье мы собираемся добавить дополнительную функцию к кнопке очистки автозаполнения пользовательского интерфейса материалов. Возьмите ссылку на кнопку очистки в коде, а затем добавьте на нее прослушиватель событий щелчка.
Создание приложения React и установка модуля:
Шаг 1: Создайте приложение React с помощью следующей команды.
npx create-react-app foldername
Шаг 2: После создания папки проекта, т. е. имени папки, перейдите к ней с помощью следующей команды:
cd foldername
Шаг 3: Установите необходимые модули
npm install @material-ui/core npm install @material-ui/lab
Структура проекта:
Пример . Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.
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; |
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
