反应输入复选框已选中

问题描述

我为我的应用程序使用了React-redux和样式化的组件。我将初始状态主题存储为浅色和深色字符串。然后在我的根应用程序中将样式化的组件初始化为浅色主题和深色主题。当我使用选择选项时，我的黑暗心情很好，但是当我使用输入复选框时，它不起作用。我从未使用过输入复选框，在阅读了几个示例之后，我使用了checked并将初始主题（来自我的redux商店）放在了我的handleChange中，如果event target has dark然后派出了黑暗主题。但是，这种处理方式没有任何变化。不知道我在做什么错。

这是我的切换组件

import React,{ useState } from 'react';
import styled from 'styled-components';
import { usedispatch,useSelector } from 'react-redux';
import { appSettings } from '../../state/appSettings';
import { TRootState } from '../../state/index';

export default function Toggle({ }: IProp) {
  const dispatch = usedispatch();
  const { "appSettings": appSettingState } = useSelector((state: TRootState) => state);
  const { theme } = appSettingState || {};
  console.log(theme); // inital state which is "light". 

  return (
    <>
      {/*  This input checkBox  does not work */}
      <CheckBoxWrapper>
        <CheckBox
          onChange={(e) => { // This function does not work
            e.target.value === `dark` ?
              dispatch(appSettings?.actions?.enableDarkTheme()) :
              dispatch(appSettings?.actions?.enableLightTheme());
          }}
          id="toggleSwitch"
          type="checkBox"
          Checked={theme === `light`}
        />
        <CheckBoxLabel htmlFor="toggleSwitch" />
      </CheckBoxWrapper>
      <br></br>

      {/*  THIS SELECT OPTIONS WORK FINE. AND I CAN GET DARK AND LIGHT THEME */}
      <h2>Theme</h2>
      <select
        name="theme"
        id="theme-select"
        value={theme}
        onChange={(e) => {
          if (e.target.value === `dark`) {
            dispatch(appSettings?.actions?.enableDarkTheme());
          } else {
            dispatch(appSettings?.actions?.enableLightTheme());
          }
        }}
      >
        <option value="dark">Dark</option>
        <option value="light">Light</option>
      </select>
    </>
  );
}

// This toogle input styled
const CheckBoxWrapper = styled.div`
position: fixed;
top:10px;
right:10px;
`;

const CheckBoxLabel = styled.label`
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 26px;
  border-radius: 15px;
  background: #bebebe;
  cursor: pointer;
  &::after {
    content: "";
    display: block;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    margin: 3px;
    background: #ffffff;
    Box-shadow: 1px 3px 3px 1px rgba(0,0.2);
    transition: 0.2s;
  }
`;
const CheckBox = styled.input`
  opacity: 0;
  z-index: 1;
  border-radius: 15px;
  width: 42px;
  height: 26px;
  &:checked + ${CheckBoxLabel} {
    background: #4fbe79;
    &::after {
      content: "";
      display: block;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      margin-left: 21px;
      transition: 0.2s;
    }
  }
`;

解决方法

检查更改事件的checked属性。 e.target.checked

<CheckBox
  onChange={(e: any) => {
    e.target.checked
      ? dispatch(appSettings?.actions?.enableDarkTheme())
      : dispatch(appSettings?.actions?.enableLightTheme());
  }}
  id="toggleSwitch"
  type="checkbox"
  Checked={theme === `light`}
/>