在 next.js 中检查另一个时取消选中输入复选框

Question

我想进行导航，我可以在其中打开一个按钮以滚动到该部分，但是当在 next.js 中签入以下代码时，我该怎么做才能取消选中 3 个输入。我必须制作每个菜单项还是可以保持原样？

感谢每一位帮助:)

function NavMenu() {
    
    function MenuItem(props) {
        const [menuItemActive, setMenuItemActive] = useState(false);

        const MenuItemToggle = ({onChange, value}) => 
            <label className='navitem-container'>
                <input checked={value} type="checkbox" onChange={onChange} className='menuiteminput' id={props.idinput}/>
                <span className='navitem-slider' id={props.idspan}>
                    {props.children}
                </span>
            </label>
        ;

        return (
            <div>
                <MenuItemToggle value={menuItemActive} onChange={(event) => setMenuItemActive(event.currentTarget.checked)}/>
            </div>
        )
    }


    return (
        <div>
            
            <div className='left-nav'>
                <div className='left-navitem-container'>
                    <MenuItem idspan="services-span" idinput="services-input">
                        Services
                    </MenuItem>
                    <MenuItem idspan="portfolio-span" idinput="portfolio-input">
                        Portfolio
                    </MenuItem>
                    <MenuItem idspan="about-us-span" idinput="about-us-input">
                        About Us
                    </MenuItem>
                    <MenuItem idspan="contact-span" idinput="contact-input">
                        Contact
                    </MenuItem>
                </div>
            </div>
        </div>
    )
}

这里是 CSS

.left-nav {
  width: 250px;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 3%;
  position: fixed;
}

.menuiteminput {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.menuiteminput:checked + #services-span:before {
  left: 72px;
  content: url(../public/svgs/blank.svg);
  transition-duration: 0.5s;
}

.menuiteminput:checked + #portfolio-span:before {
  left: 72px;
  content: url(../public/svgs/blank.svg);
  transition-duration: 0.5s;
}

.menuiteminput:checked + #about-us-span:before {
  left: 72px;
  content: url(../public/svgs/blank.svg);
  transition-duration: 0.5s;
}

.menuiteminput:checked + #contact-span:before {
  left: 72px;
  content: url(../public/svgs/blank.svg);
  transition-duration: 0.5s;
}

.menuiteminput:checked + .navitem-slider {
  padding-left: 13px;
}

.navitem-container {
  height: 30px;
  display: flex;
  align-items: center;
  margin: 30px 0;
}

.navitem-slider {
  margin: 20px 0;
  height: 30px;
  background-color: var(--accent-color);
  width: 100px;
  display: flex;
  align-items: center;
  font-size: 10pt;
  border-radius: 100px;
  position: relative;
  padding-left: 33px;
  cursor: pointer;
  transition-duration: 0.5s;
}

.navitem-slider:before {
  width: 16.5px;
  height: 16.5px;
  border-radius: 100px;
  background-color: white;
  left: 3px;
  position: absolute;
  top: 3px;
  padding: 4px;
  transition-duration: 0.5s;
}

#services-span {
  width: 100px;
}

#services-span:before {
  content: url(../public/svgs/service.svg);
  transition-duration: 0.5s;
}

#portfolio-span:before {
  content: url(../public/svgs/portfolio.svg);
  transition-duration: 0.5s;
}

#about-us-span:before {
  content: url(../public/svgs/team.svg);
  transition-duration: 0.5s;
}

#contact-span:before {
  content: url(../public/svgs/contacts.svg);
  transition-duration: 0.5s;
}

提前致谢：D

Answer 1

您可以通过在NavMenu 组件中定义共享状态来控制所有checkboxes 的checked 状态，如下所示：

您可以了解有关此技巧的更多信息：Controlled and uncontrolled field 和 lifting-state-up

function MenuItem(props) { 
    return (
       <div>
           <label className='navitem-container'>
              <input checked={props.checked} type="checkbox" onChange={props.onChange} className='menuiteminput' id={props.idinput}/>
               <span className='navitem-slider' id={props.idspan}>
                    {props.children}
                </span>
            </label>
        </div>
      )
}

function NavMenu() {
    const [activeItem, setActiveItem] = React.useState('');
      
    const handleChange = (e)=> {
      const {id, checked} = e.target;
      setActiveItem(checked ? id : '');
    }  
    
    return (
        <div>
            <div className='left-nav'>
                <div className='left-navitem-container'>
                    <MenuItem idspan="services-span" idinput="services-input" checked={activeItem == "services-input"} onChange={handleChange}>
                        Services
                    </MenuItem>
                    <MenuItem idspan="portfolio-span" idinput="portfolio-input" checked={activeItem == "portfolio-input"} onChange={handleChange}>
                        Portfolio
                    </MenuItem>
                    <MenuItem idspan="about-us-span" idinput="about-us-input" checked={activeItem == "about-us-input"} onChange={handleChange}>
                        About Us
                    </MenuItem>
                    <MenuItem idspan="contact-span" idinput="contact-input" checked={activeItem == "contact-input"} onChange={handleChange}>
                        Contact
                    </MenuItem>
                </div>
            </div>
        </div>
    )
}

ReactDOM.render(<NavMenu/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>