Блог

Представьте, что у меня где-то есть кнопка. При нажатии текст на нем теперь переходит в мою панель поиска. Как мне заставить окно прокручиваться до строки поиска тоже после того, как значение установлено в Input элементе, показанном ниже?

           <Flex
            flexDirection="column"
            justifyContent="center"
            alignItems="center"
            maxWidth="90%"
            mt={4}
          >
            {!filteredBlogPosts.length amp;amp; 'No posts found.'}
            {filteredBlogPosts.map((frontMatter) => (
              <>
              <BlogPost
                key={frontMatter.title   frontMatter.lastPublishedOn}
                 handleSearch={(anyKey) => setSearchValue(anyKey)}
                 // Insert your code here, how to scroll after setting the key to search? 
                {...frontMatter}
              />
              </>
            ))}
          </Flex>
 

И вот <Input> поле

             <Input
              aria-label="Search"
              borderColor="blue.500"
              onChange={(e) => setSearchValue(e.target.value)}
              placeholder="Search"
              value={searchValue}
              //or should I do scroll here? How?
              autoFocus
              onFocus={e => e.currentTarget.select()}
            />

 

Это легко сделать? Пожалуйста, представьте примеры кода, если это возможно.

Спасибо.

Если кто-нибудь столкнется с этой проблемой в будущем, я решил ее с помощью этой простой функции.

     const scrollSearch = myKey => {
    window.scrollTo(0, 0);
    frontMatter.handleSearch(myKey)
  };
 

И передал scrollSearch функцию в кнопке onClick .