Делаю модальное окно через UIkit и при назначении события на ссылку в React, она вообще никак не откликается?

Question

[Tolik228]

const ChooseModal = ({target, data, redirect, modal}) => {
        

    const pageList = data.map(item => {
      return (
        <li key={item}>
                <a 
                className="uk-link-muted" 
                href='#'
                onClick={(e) => redirect(e, item)}
                >{item}</a>
        </li>
        )
      })

    return (
      <>
        <div id={target} data-uk-modal={modal.toString()}>
              <div className="uk-modal-dialog uk-modal-body">
                  <h2 className="uk-modal-title">Открыть</h2>
                  <ul className="uk-list uk-list-striped">
                      {pageList}
                  </ul>
                  <p className="uk-text-right">
                      <button 
                      className="uk-button uk-button-default uk-modal-close" 
                      type="button"
                      >Отменить</button>
                  </p>
              </div>
          </div>
      </>
    )
}

(Пробовал исправить при помощи React Portal , но тогда кнопка триггер не видит модальное окно и не открывает его)

Comments

[art style]

e=>console.log(e) работает? значит проблема с redirect(e, item)

[Tolik228]

art style, нет тоже не работает

[Tolik228]

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

[art style]

Tolik228,

function handleClick(e) {
   e.preventDefault()
   redirect(e, item)
};
<a onClick={handleClick}>link</a>

а так?

[Tolik228]

art style, тоже нет

[Tolik228]

art style, https://question-it.com/questions/2596103/reactjs-... вот подобная проблема, но через портал триггер модалки не работает

Answer 1

[Ilya Olovyannikov]

Потому-что ссылка это ссылка, а не кнопка.
Для взаимодействия с элементами используйте кнопки типа button.

Comments

[Tolik228]

И с button тоже самое, в проекте есть вторая модалка, там таже проблема ,но с кнопкой, решить удалось через ref.
А в данном случае решать через ref это костыль.
Данная проблема связана с делегировннием событий react 17 ,а не с типом селектора

Answer 2

[TM007]

Где-то встречал, что это бага 3-й версии пакета, которая вылазит в React.
Лечится изменений одной строки

<div id={target} data-uk-modal={modal.toString()} container="false">

Не понимаю как - но у меня эта магия работает.

Comments

[Niksak]

Кааак:) у меня тоже была проблема, пасиб