如何在 Next.Js 中创建“选定的选项卡”？答案

【问题标题】：How to create "Selected tab" in Next.Js?如何在 Next.Js 中创建“选定的选项卡”？
【发布时间】：2023-01-13 18:10:28
【问题描述】：

我正在尝试在 Next.Js 中创建选定的选项卡。

用户可以选择搜索用户或帖子的数据，用户将通过单击其中一个按钮来选择要搜索的内容。

用户单击按钮后，按钮的背景将变为蓝色。

但是我无法使其正常工作，当用户单击按钮时，.Selected 类被添加到按钮但按钮不呈现 CSS。

import React, { MouseEventHandler, ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'

import style from '../styles/Search.module.css'

const Search: PageWithLayout = () => {
  const [searchPosts, setPostsSearch] = useState < String > ();

  const setSearchOption = (searchFor: String) => {
    let searchOption = '';

    if (searchFor == 'POSTS') {
      searchOption = 'POSTS';
    } else {
      searchOption = 'USERS';
      let button = document.getElementById('usersOption') as HTMLElement;
      button.className += style.Selected;
    }

    console.log(searchOption);
    setPostsSearch(searchOption);
  }

  return (
    <>
      <div className='pageContent'>
        <div className={style.SearchBarContainer}>
          <div className={style.SearchContainer}>
            <i className="fa-solid fa-magnifying-glass"></i>
            <input className={style.SearchBar} type={'text'} placeholder='Search...' />

          </div>
          <div className={style.SearchOptions}>
            <button id='usersOption' onClick={() => setSearchOption('USERS')}>Users</button>
            <button id='postsOption' onClick={() => setSearchOption('POSTS')}>Posts</button>
          </div>

        </div>
        <div className='SearchedContent'>

        </div>

      </div>
    </>
  )
}

Search.getLayout = function getLayout(page: ReactElement) {
  return (
    <MainLayout>
      {page}
    </MainLayout>
  )
}

export default Search

【问题讨论】：

标签： javascript html css next.js html-rendering

【解决方案1】：

您可以将 searchOption 数据用于 className 样式

import React, { MouseEventHandler, ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'

import style from '../styles/Search.module.css'

const Search: PageWithLayout = () => {

    const [searchPosts, setPostsSearch] = useState<String>();


    return (
        <>
            <div className='pageContent'>
                <div className={style.SearchBarContainer}>
                    <div className={style.SearchContainer}>
                        <i className="fa-solid fa-magnifying-glass"></i>
                        <input className={style.SearchBar} type={'text'} placeholder='Search...'/>

                    </div>
                    <div className={style.SearchOptions}>
                        <button id='usersOption' className={searchPosts === 'USERS' ? style.Selected : undefined } onClick={() => setPostsSearch('USERS')}>Users</button>
                        <button id='postsOption' className={searchPosts === 'POSTS' ? style.Selected : undefined } onClick={() => setPostsSearch('POSTS')}>Posts</button>
                    </div>

                </div>
                <div className='SearchedContent'>

                </div>

            </div>
        </>
    )
}

Search.getLayout = function getLayout(page: ReactElement){
    return(
        <MainLayout>
            {page}
        </MainLayout>
    )
}


export default Search

【讨论】：

【解决方案2】：

只需为活动的 searchOption 设置一个状态，然后有条件地将类直接应用到 JSX 中。

const [activeSearchOption, setActiveSearchOption] = useState('USERS')

return (
        <>
          <div className='pageContent'>
            <div className={style.SearchBarContainer}>
              <div className={style.SearchContainer}>
                <i className="fa-solid fa-magnifying-glass"></i>
                <input className={style.SearchBar} type={'text'} placeholder='Search...'/>
               </div>
                <div className={style.SearchOptions}>
                  <button id='usersOption' className={activeSearchOption === 'USERS' ? 'active' : ''} onClick={() => setSearchOption('USERS')}>Users</button>
                   <button id='postsOption' className={activeSearchOption === 'POSTS' ? 'active' : ''} onClick={() => setSearchOption('POSTS')}>Posts</button>
                </div>
              </div>
                <div className='SearchedContent'>

                </div>
            </div>
        </>
    )

【讨论】：