输入开关需要双击才能在 Next.Js 中激活答案

【问题标题】：Input switch requires double click before activating in Next.Js输入开关需要双击才能在 Next.Js 中激活
【发布时间】：2022-01-13 10:24:03
【问题描述】：

我正在尝试在 Next.Js 中进行开关。为了帮助我观看了这个视频：https://www.youtube.com/watch?v=1W3mAtAT7os&t=740s 问题是，每次我重新加载页面时，开关都需要在移动开关之前单击 2 次，然后单击 3 次才能将其关闭

这是我的 .js 文件中的代码

import React, { useEffect, useState } from 'react'    

export default function Navigation() {
    const [menuActive, setMenuActive] = useState(false);

    const Toggle = ({onChange}) => 
        <label className='menu-button'>
            <input type="checkbox" onChange={onChange} className='input'/>
            <span className='slider'/>
        </label>
        ;

    return (
        <div>
             <div className='menu-button-container'>
                  <Toggle onChange={(event) => setMenuActive(event.target.checked)} />
             </div>
        </div>
    )
}

这里是 CSS：

.menu-button-container {
  width: 50%;
  height: 125px;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
}

.menu-button {
  position: relative;
  width: 90px;
  display: flex;
  justify-content: center;
}

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

.input:checked + .slider:before {
  width: 17px;
  height: 17px;
  border-radius: 50px;
  transition: 0.3s;
  background: white;
  background-repeat: no-repeat;
  background-size: 12.5px;
  background-position: center;
  left: 30px;
  content: "";
}

.slider {
  display: flex;
  cursor: pointer;
  width: 50px;
  height: 25px;
  border-radius: 100px;
  background-color: black;
  position: relative;
  align-items: center;
  z-index: 2;
}

.slider:before {
  content: "";
  position: absolute;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50px;
  transition: 0.3s;
  background: white;
  background-repeat: no-repeat;
  background-size: 12.5px;
  background-position: center;
}

提前致谢:)

【问题讨论】：

切换导入代码在哪里？？

标签： javascript reactjs react-native next.js

【解决方案1】：

您忘记在Toogle 组件中传递复选框值！

试试这个代码吧！

import React, { useEffect, useState } from 'react'

export default function Navigation() {
  const [menuActive, setMenuActive] = useState(false);

  const Toggle = ({ onChange, value }) =>
    <label className='menu-button'>
      <input checked={value} type="checkbox" onChange={onChange} className='input' />
      <span className='slider' />
    </label>
    ;

  return (
    <div>
      <div className='menu-button-container'>
        <Toggle value={menuActive} onChange={(event) => setMenuActive(event.target.checked)} />
      </div>
    </div>
  )
}

【讨论】：

谢谢，现在可以了。现在唯一的问题是，滑块没有动画它从左到右的移动。我应该在 usestate 上更改 className 吗？

【解决方案2】：

尝试使用真值而不是假值。

import React, { useEffect, useState } from 'react'    

export default function Navigation() {
    const [menuActive, setMenuActive] = useState(true);

    const Toggle = ({onChange}) => 
        <label className='menu-button'>
            <input type="checkbox" onChange={onChange} className='input'/>
            <span className='slider'/>
        </label>
        ;

    return (
        <div>
             <div className='menu-button-container'>
                  <Toggle onChange={(event) => setMenuActive(event.target.checked)} />
             </div>
        </div>
    )
}

【讨论】：