169 похожих чатов

Допустимо ли внутри компонента исследовать children, извлекать значение пропсов и

тд ?
делаю кастомный select .

27 ответов

19 просмотров

а если на человеческом?

А что за кейс? Вообще так делают, но подход не очень очевидный и, кажется, лучше избегать

Стилизация завязана на пропсах самого селекта? По идее, по событиям на селекте должен, скорее, родительский компонент обновлять свои собственные свойства. А не завязываться на пропсы селекта.

Kirill- Автор вопроса
Liubomyr
а если на человеческом?

1)внутри Select достаю children из пропс которые состояит из Options 2) ищу среди них тот у которого установлен selected 3) и его пропсов забираю значение которое задает его имя и вставляю его Select в качестве выбранного варианта

Kirill
screenshot 1)внутри Select достаю children из пропс которые с...

Такое можно сделать сильно проще - назначить каждому опшну value в виде идентификатора В value селекта передать список идентификаторов для мультиселекта или один идентификатор для сингл селекта Дальше чекать, есть ли идентификатор опшна в валуе селекта Такое апи будет поприятнее в использовании по идее

Kirill
screenshot 1)внутри Select достаю children из пропс которые с...

ох уж эти любители везде фором пробежаться

Kirill- Автор вопроса
Veli
Такое можно сделать сильно проще - назначить каждо...

>Дальше чекать, есть ли идентификатор опшна в валуе селекта но как селекту получить name выбранного опшона ? так же через children и там по идентификатору искать опшон и из него извлекать инфу ?

Kirill
>Дальше чекать, есть ли идентификатор опшна в валу...

я бы опшны передавал пропсом тоже, а не версткой снаружи в 9/10 случаев тебе придется этот цикл по опшнам писать снаружи. Как будто бы логичнее написать его внутри а внутри цикла ты будешь просто матчить id элемента, по которому ты сейчас итерируешься, с айди в валуе селекта

Kirill
>Дальше чекать, есть ли идентификатор опшна в валу...

<Select options={твои_данные} value={айди_опшна} /> при этом ты можешь как задефайнить общую структуру опшна условно такую: type Option = { id: string content: ReactNode } так и сделать опшн дженериком и снаружи передавать функции, которые будут резолвить нужные филды <Select options={твои_данные} value={айди_опшна} getOptionId={option => option.id} getOptionContent={option => option.content} />

если ты прям хочешь опшны прокидывать версткой внутрь, то еще есть вариант с контекстом т.е. твой Select может объявить внутри себя контекст с value и тогда опшн сможет сам внутри понять, заселекчен он или нет

Kirill- Автор вопроса
Veli
<Select options={твои_данные} value={айди_опшн...

я с такого подхода и начал . один в один но потом подумал что select должен иметь возможно быть созанным как в html - <select> <option value></> </select> правильно я понимаю что особой нужды в этом нет и можно опшонс кидать объектом внутрь и все ?

Kirill
я с такого подхода и начал . один в один но потом...

у html есть ряд ограничений, связанных конкретно с тем, как работает html, или с историческими причинами, поэтому я бы точно не стал апи компонентов пытаться сделать точно таким же тем более JSX наоборот пытаются ближе к JS делать. Пример - className вместо class и другие атрибуты, которые сделаны как в JS, а не как в html а вообще почему делаешь кастомный селект? для опыта или реального применения? если для реального применения, то смотри unstyled ui киты лучше, потому что ты можешь не учесть гораздо более важные вещи, чем то, как выглядит апи - например a11y. Пример либ - react-aria, radix. Первое гибче, но сложнее, а второе проще, но менее гибкое. Оба без стилей абсолютно, сможешь сделать то, что тебе конкретно нужно

Veli
у html есть ряд ограничений, связанных конкретно с...

вранье, хтмл лучший язык программирования

Kirill
я с такого подхода и начал . один в один но потом...

а такое апи с <select> <option> хоть и гибкое, но сложное в применении заставлять каждого потребителя компонента писать цикл по опшнам снаружи - это такое себе а фиксированные они бывают редко

Kirill- Автор вопроса
Veli
если ты прям хочешь опшны прокидывать версткой вну...

так тоже пробовал ) проблема в том что пока select не "открыт" и опшоны не отрендеренны из них нельзя извлечь их name ) и приходится извлекать его из children

Kirill
так тоже пробовал ) проблема в том что пока select...

тебе не нужно ниоткуда никакой name извлекать у тебя будет Option с пропсом value и Select с пропсом value. value селекта ты прокинешь в опшн через контекст. Опшн сравнит его со своим value и поставит себе статус зачеканности

Kirill- Автор вопроса
Veli
у html есть ряд ограничений, связанных конкретно с...

&gt; а вообще почему делаешь кастомный селект? хотел сделать селект с Поиском а в mui не нашел такого, пришлось пытаться

Kirill
&gt; а вообще почему делаешь кастомный селект? хо...

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

Kirill- Автор вопроса
Veli
тебе не нужно ниоткуда никакой name извлекать у т...

пока селект закрыт пусть он имеет валью , но как получить name для отображения ? контекст до рендеринга пропсов не включается хотя наверное не очень важно, поскольку это вариант реализации забракован уже ))

да какой name? зачем он тебе вообще? ты зациклился не на задаче, а на каком-то из своих вариантов решения и пытаешься его добить, а не решить задачу

Kirill- Автор вопроса
Veli
да какой name? зачем он тебе вообще? ты зациклился...

я ответ получил и понял как делать я просто хотел уточнить как в случае реализации версткой получать name просто из интереса <select checkd=ru > <option value='ru'> Russian </> </> как в этом случае select получит Russian для обображения в себе если не перебором children пока закрыт - через контекст не получить . но согласен , это не относится к непосредственнйй задаче спасибо

Kirill
я ответ получил и понял как делать я просто хотел ...

зачем селекту получать контент опшна? опшн сам его отрендерит

Kirill- Автор вопроса
Veli
зачем селекту получать контент опшна? опшн сам его...

опшен отрендерит когда селект открыт а когда селект закрыт и должен просто отображать "выбраннное" валью нельзя отобразить - там просто "en" , а полноразмерное имя только опшен держит

Kirill
я ответ получил и понял как делать я просто хотел ...

https://codesandbox.io/s/thirsty-firefly-j5d7q3?file=/src/select.tsx +- такое я имел ввиду

Kirill
опшен отрендерит когда селект открыт а когда селе...

ну в нативном селекте значение выбранного само из опшна берется, например там ничего придумывать не надо

Kirill- Автор вопроса
Veli
ну в нативном селекте значение выбранного само из ...

понял, это вариант использованием оригинального select я просто select брал как div с текстом опшон тоже и по этому требовался доступ к контенту опшионс спасибо, буду переписывать под объект опшонс обратно )

Kirill
понял, это вариант использованием оригинального se...

лучше возьми готовое, в mui не сложно поиск встроить. А если нужно полностью без стилей - react-aria или radix. Твое решение на дивах будет очень плохим с точки зрения a11y и UX, а там надо учитывать огромное количество вещей

Похожие вопросы

Обсуждают сегодня

Мужики и девушки, привет) в Вelphi xe7 в настройках во вкладке "Editor Options" далее " Color" есть список: "Elements", открыв который мы можем настраивать отображение разных...
Kraszx
14
Добрый вечер. Есть вопрос, а может и предложение. Был у меня диалог в другой группе о делфи и я задался вопросом: "А нельзя ли в делфи цвет //коментария и {комментария} сде...
Kraszx
24
как быть с принтером? такой подход прокатит?
zamtmn
12
Всем привет! Подскажи, пожалуйста, как передать в TComboBox сразу значение и id записи. На Delphi я делал так: ComboBox1.Items.AddObject('Какое-то значение', Pointer(id запис...
Евгений
13
Мдя, прикол, боевая сборка запускается (именно под отладчиком) после F9 примерно полторы минуты (97 секунд если быть точным). Начал копать - проблема детектится сразу - зависа...
Александр (Rouse_) Багель
38
А вот это что за конструкция? Вернее, она тут нафига?
Serjone
10
Привет. Подскажите, как правильно сматчить лист фиксированного размера, чтобы компилятор не говорил мне о неполном паттерне? Допустим что-то такое [x', y'] = sort [x, y]?
Arseny
8
Здравствуйте, вопрос по структурам данных. Были у вас случаи, когда пришлось писать деревья или двунаправленные списки?
/ /
50
Товарищи, кто работа с iphelper? Или может я в самой логике ошибки фигачу, не пойму.... var ifTable : PMIB_IFTABLE; size, corSize: DWORD; Buffer ...
Warfarellen
4
Мужики. привет) в Вelphi xe7 в настройках во вкладке "Editor Options" далее " Color" есть список: "Elements", открыв который мы можем настраивать отображение разных элементов...
Kraszx
2
Карта сайта