Как в реакте делать кастомные компоненты?

Question

Есть кастомный селект сделанный на реакте(рабочий пример) в коде подключается так: <Select items={elements} /> , где elements - массив объектов значений.

По сути все работает как надо, но есть одно "но" как мне передавать и вызывать функцию которая будет забирать значение из этого селекта ? например: <Select items={elements} onChange={myAwesomeChangeFunction} /> прокинуть функцию в компонент, с этим нет проблем, а вот как ее там обработать...

Мне просто не очень понятно как это делается в таких библиотеках как ant design Хочется понять как делаются такие кастомные компоненты?

update нужного функционала добился с использование хука useRef() обновленный рабочий пример

ps: только недавно начал учить реакт :)

Answer 1

Смотрите на свой input внимательно какие там атрибуты вы написали?

      <input
        className="Select__value-input"
        readOnly
        onChange={test}
        autoComplete="off"
        value={currentValue.value}
      />

Как может функция обработать (onChange) то что вы ввел пользователь если у него стоит атрибут readOnly?
Как может функция обработать вообще что нибудь если его присвоили к элементу у который в стилях задано visibility:hidden; opacity: 0;

Уберите readOnly и эти стили ненужные и все будет работать как надо.И больше не пишите так не логично поставив readOnly и onChange в input.

Рабочая версия input-а выглядит так.

      <input
        onChange={test}
        autoComplete="off"
        value={currentValue.value}
      />

UPD:

У вас логика компонента написано не правильно.Поэтому дать правильный ответ тут не просто. Для того чтобы получить значение из App вам надо отправить функцию в компонент и контролировать значение input-а внутри App.И правильно переписать свой код.

Простой пример как это сделать в Codesandbox.

БЛОГ НА HUSL

Как в реакте делать кастомные компоненты?

Ответы (1 шт):