Блог

Главная - Вопросы по программированию - CSS3 Анимированное окно поиска в react не работает

CSS3 Анимированное окно поиска в react не работает

#javascript #reactjs

Вопрос:

Я пытаюсь создать следующий элемент для своего проекта react http://demo.icanbecreative.com/css3-animated-search-box/ использование этого справочного руководства https://icanbecreative.com/article/css3-animated-search-box/. но у меня возникла проблема при попытке реализовать следующую функцию

 function searchToggle(obj, evt){
    var container = $(obj).closest('.search-wrapper');
        if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
        }
        else if(container.hasClass('active') amp;amp; $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            // clear input
            container.find('.search-input').val('');
        }
}

Поскольку он использует jQuery, поэтому я хочу преобразовать эту функцию, чтобы иметь возможность выполнять ее в своем коде. Попробуйте скрыть элемент и показывать его динамически при каждом нажатии кнопки следующим образом

 const [showInput, setShowInput] = useState(false);

<div className="search-wrapper">
     <div className="input-holder">
          <button className="search-icon"  onClick={()=>setShowInput((p) => !p)}><span></span></button>
               {showInput amp;amp;   <input type="text" className="search-input" placeholder="Type to search" /> }
           </div>
      <span className="close" onClick={displaySearchToggle}></span>
</div>

Но это не работает.но это не работает, кнопка отображается правильно, но при нажатии на нее не отображается ввод

Метки: