Jquery onchange: change event | jQuery API Documentation

Автоуправляемое состояние

Инструкции по установке приведены в разделе «Использование».

jQuery — это библиотека для работы с DOM. Он читает и записывает в DOM. React использует виртуальный DOM (представление реального DOM в JavaScript). Реагировать только записывает исправлений в DOM, но никогда не читает из него .

Невозможно синхронизировать реальные манипуляции с DOM с виртуальным DOM React. Из-за этого вся функциональность jQuery была повторно реализована в React.

Декларативные API обеспечивают надежные функции и проверку свойств.

Визуализированный HTML

Визуализированный HTML

Управление отображаемым тегом HTML или отображение одного компонента как другого компонента. Дополнительные реквизиты передаются компоненту, который вы визуализируете как .

Аугментация мощная. Вы можете создавать компоненты компонентов и реквизиты без добавления дополнительных вложенных компонентов. Это необходимо для работы с MenuLinks и react-router .

Визуализированный HTML

Визуализированный HTML

Сокращенные реквизиты генерируют разметку для вас, что упрощает многие варианты использования. Все реквизиты объекта распространяются на дочерние компоненты.

Компоненты с повторяющимися дочерними элементами принимают массивы простых объектов. Facebook любит это, а не использование контекста для обработки связи родитель-потомок, и мы тоже.

Визуализированный HTML

Иконка prop является стандартной для многих компонентов. Он может принимать Icon name , объект Icon props или экземпляр .

Визуализированный HTML

Свойство image является стандартным для многих компонентов. Он может принимать изображение src , объект Image props или экземпляр .

Визуализированный HTML

Подкомпоненты предоставляют вам полный доступ к разметке. Это необходимо для гибкости настройки компонентов.

Визуализированный HTML

React имеет концепцию контролируемых и неконтролируемых компонентов.

Наши компоненты с отслеживанием состояния самостоятельно управляют своим состоянием из коробки, без проводки. Выпадающие списки открываются по клику без проводки onClick к реквизиту open . Значение также хранится внутри, без проводки onChange to value .

Если вы добавите value prop или open prop, выпадающее меню делегирует управление этим одним реквизитом вашему значению. Другие реквизиты остаются автоматически управляемыми. Смешивайте и сочетайте любое количество контролируемых и неконтролируемых реквизитов. Добавляйте и удаляйте контроль в любое время, добавляя или удаляя реквизит. Все просто работает.

Взгляните на наш ModernAutoControlledComponent , чтобы увидеть, как это было сделано. См. документы, чтобы попробовать это вживую.

Select API — Material UI

Справочные документы по API для компонента React Select. Узнайте о реквизитах, CSS и других API этого экспортированного модуля.

Демонстрации

Импорт

 импорт Выберите из '@mui/material/Select';
// или
импортировать { Select } из '@mui/material'; 

Реквизиты

Реквизиты компонента OutlinedInput также доступны.

Имя	Тип	По умолчанию	Описание
autoWidth	false	Если true , ширина всплывающего окна будет автоматически установлена ​​в соответствии с элементами внутри меню, в противном случае это будет как минимум ширина выбранного ввода.
дочерние элементы	узел		Элементы option для заполнения выбора. Может быть какой-то MenuItem , когда native является ложным, и option , когда native является истинным. ⚠️ Элементы MenuItem должны быть прямыми потомками, если родной является ложным.
классы	объект	{}	Переопределение или расширение стилей, примененных к компоненту. Дополнительные сведения см. в разделе CSS API ниже.
defaultOpen	bool	false	Если true , компонент изначально открыт. Используйте, когда открытое состояние компонента не контролируется (т. е. свойство open не определено). Вы можете использовать его только тогда, когда родной реквизит равен false (по умолчанию).
defaultValue	любой		Значение по умолчанию. Используйте, когда компонент не контролируется.
displayEmpty	bool	false	Если true , значение отображается, даже если элементы не выбраны. Чтобы отобразить осмысленное значение, можно передать функцию renderValue prop, которая возвращает значение, которое будет отображаться, когда элементы не выбраны. ⚠️ При использовании этого реквизита убедитесь, что метка не перекрывает пустое отображаемое значение. Метка должна быть либо скрыта, либо переведена в сжатое состояние.
IconComponent	elementType	ArrowDropDownIcon	Значок со стрелкой.
id	string		id элемента оболочки или select element когда native .
вход	элемент		элемент вход ; не обязательно должен быть специфичным для материала UI Ввод .
inputProps	объект		Атрибуты, применяемые к элементу input . Когда native равно true , атрибуты применяются к элементу select .
метка	узел		См. метку OutlinedInput#
labelId	строка		Идентификатор элемента, который действует как дополнительная метка. Выбор будет помечен дополнительной меткой и выбранным значением.
MenuProps	объект		Свойства, примененные к элементу Menu .
Multiple	bool	false	Если true , значение должно быть массивом, и меню будет поддерживать множественный выбор.
native	bool	false	Если true , компонент использует собственный выберите элемент .
onChange	func		Обратный вызов запускается при выборе пункта меню. Подпись: function(event: SelectChangeEvent, child?: object) => void event: Источник события обратного вызова. Вы можете получить новое значение, обратившись к event.target.value (любому). Предупреждение . Это общее событие, а не событие изменения, если только событие изменения не вызвано автозаполнением браузера. дочерний: Элемент реакции, который был выбран, когда родной равен false (по умолчанию).
onClose	func		Обратный вызов запускается, когда компонент запрашивает закрытие. Используйте его либо в контролируемом (см. реквизит open ), либо в неконтролируемом режиме (чтобы определить, когда Select схлопывается). Подпись: функция (событие: объект) => void событие: Источник события обратного вызова.
onOpen	func		Обратный вызов запускается, когда компонент запрашивает открытие. Используйте его либо в контролируемом (см. реквизит open ), либо в неконтролируемом режиме (чтобы определить, когда расширяется Select). Подпись: function(event: object) => void event: Источник события обратного вызова.
открытый	bool		Если true , компонент отображается. Вы можете использовать его только тогда, когда родной реквизит равен false (по умолчанию).
renderValue	func		Визуализация выбранного значения. Вы можете использовать его только тогда, когда родной реквизит равен false (по умолчанию). Подпись: функция (значение: любое) => ReactNode значение: значение , предоставленное компоненту.
SelectDisplayProps	объект		Свойства, примененные к кликабельному элементу div.
sx	Array | объект | логический> | функция | object		Системная поддержка, которая позволяет определять системные переопределения, а также дополнительные стили CSS. См. страницу `sx` для более подробной информации.
значение	» | любой		Значение ввода . Если указать пустую строку, параметры не будут выбраны. Установите пустую строку '' , если вы не хотите, чтобы какой-либо из доступных вариантов был выбран. Если значение является объектом, оно должно иметь ссылочное равенство с параметром, чтобы его можно было выбрать. Если значение не является объектом, строковое представление должно совпадать со строковым представлением параметра, чтобы его можно было выбрать.
вариант	«заполненный» | ‘очерченный’ | «стандартный»	«контурный»	Используемый вариант.

Наследование

Реквизит темы по умолчанию

CSS

Следующие имена классов полезны для стилизации с помощью CSS (классы состояний помечены).
Чтобы узнать больше, посетите страницу настройки компонента.

Имя правила	Глобальный класс	Описание
select	. MuiSelect-select 9014 0	Стили, применяемые к выбранному компоненту класса `select`.
множественный	.MuiSelect-множественный	Стили применяются к выбранному компоненту, если множественный={true} .
filled	.MuiSelect-filled	Стили, применяемые к выбранному компоненту, если variant="filled" .
контурный	.MuiSelect-контурный	Стили, применяемые к выбранному компоненту, если variant="outlined" .
стандарт	.MuiSelect-standard	Стили, применяемые к выбранному компоненту, если variant="standard" .
отключено СОСТОЯНИЕ	.Mui-отключено	Класс состояния применяется к выбранному классу компонента `отключено`.
значок	.MuiSelect-icon	Стили, примененные к компоненту значка.
iconOpen	.MuiSelect-iconOpen	Стили, применяемые к компоненту значка, если всплывающее окно открыто.
iconFilled	.MuiSelect-iconFilled	Стили, применяемые к компоненту значка, если variant="filled" .
iconOutlined	.MuiSelect-iconOutlined	Стили, применяемые к компоненту значка, если variant="outlined" .
iconStandard	.MuiSelect-iconStandard	Стили, применяемые к компоненту значка, если variant="standard" .
nativeInput	.MuiSelect-nativeInput	Стили, применяемые к базовому компоненту собственного ввода. No related posts. Вперед Как пропинговать сервер: Как пропинговать IP-адрес (компьютера, роутера или сервера) Назад Что должен знать верстальщик сайтов: Верстальщик сайтов: кто это, чем занимается, задачи Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Http Javascript Photoshop Верстка Вопросы и ответы Макет Развитие сайтов Сайт Шаблон Шрифт Разное Рубрики Css Html Http Javascript Linux Photoshop Адаптив Верстка Вопросы и ответы Макет Развитие сайтов Разное Сайт Советы Шаблон Шаблоны Шрифт Шрифты