0

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

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

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

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

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

2
  • В каком смысле обработать? Пишешь функцию и потом присваиваешь эту функцию в атрибут onChange что непонятно то?
    – Randall
    10 мая 2020 в 15:37
  • если я пишу так: <input className="Select__value-input" readOnly onChange={() => { props.getValue(currentValue); }} autoComplete="off" value={currentValue.value} /> то в функции const getValue = (value) => { console.log(value); return value; }; ничего не выводится
    – Swartex
    10 мая 2020 в 19:05

1 ответ 1

1

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

      <input
        className="Select__value-input"
        readOnly
        onChange={test}
        autoComplete="off"
        value={currentValue.value}
      />
  1. Как может функция обработать (onChange) то что вы ввел пользователь если у него стоит атрибут readOnly?

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

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

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

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

UPD:

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

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

5
  • у вас в примере функция тест в консоль ничего не выводит. и получение значение внутри компонента, это не много не то что я хотел.. мне нужно в App.js получить значение из компонента Select. Для этого надо передавать функцию как пропс? Или использовать Redux ? и что делать если у меня на странице будет 10 таких кастомных слелектов с разными наборами данных? просто хочу сделать компонент
    – Swartex
    11 мая 2020 в 11:46
  • @Swartex Я думаю вы не понимаете разницу между input-ом и select-ом.В input функция onChange срабатывает только тогда когда что то там вводите.А в select если меняете одно значение на другое.В вашем случае у вас input.Чтобы увидеть результат в консоли надо поставить фокус и написать что нибудь в экране ничего не будет видно но в консоли отобразится ваш результат.А что касается того чего вы хотели я сейчас дополню свой ответ и покажу как отправить функцию как props.
    – Randall
    11 мая 2020 в 12:20
  • Спасибо! и опять это не совсем что мне нужно :) input - я использую не просто так ридонли, хотя можно уже и без него обойтись )) но вы меня натолкнули меня на очень интересную мысль, а именно использовать useRef() . Не берусь утверждать что моё решение правильное)
    – Swartex
    11 мая 2020 в 14:35
  • @Swartex пожалуйста объясните то что вам нужно четко.То что вы хотели сделать я вам объяснил и показал.Но вы не сказали зачем вам и readOnly и onChange в одном input-е хотя утверждаете что это не просто так.У меня нету способности читать ваши мысли если вы их мне не скажите.Удачи :).
    – Randall
    11 мая 2020 в 14:46
  • делал как в примере здесь ant.design/components/select во всех примерах селектов используется input c readonly ) потому и я также сделал )
    – Swartex
    11 мая 2020 в 14:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.