如何打開/關閉React中的復選框？

我真是個傻瓜。我想用 React 更改復選框的設計。新設計是Checkbox.js.我用js設計的。我想打開/關閉它，但它永遠不起作用。我想使用剪輯路徑，但是當我使用它時，復選框根本不起作用。我真的很想知道答案。正因為如此，我花了8個小時。請教我方法。請。

ListPage.js

import React, { useState } from 'react';
import styled from 'styled-components';
import Checkbox from '../Checkbox/Checkbox';
import { MdKeyboardArrowDown } from 'react-icons/md';

function KeywordButton() {
  const [isChecked, setIsChecked] = useState(false);

  const changeOption = e => {
    setIsChecked(e.target.isChecked);
  };
  return (
    <React.Fragment>
        <CheckBoxWrap>
          <WrapBox>
            <BoxAndTextWrap>
              <CheckboxShell>
                <Checkbox onChange={changeOption} isChecked={isChecked} />
              </CheckboxShell>
              <TextBoxWrap> exercise </TextBoxWrap>
            </BoxAndTextWrap>
          </WrapBox>
        </CheckBoxWrap>
      </LeftModalWrap>
    </React.Fragment>
  );
}

Checkbox.js

import React, { useState } from 'react';
import styled from 'styled-components';

function Checkbox({ isChecked, ...props }) {
  return (
    <LabelLabal>
      <A>
        <B type="checkbox" isChecked={isChecked} {...props} />
        <C>
          <D>
            <Icon viewBox="0 0 24 24">
              <polyline points="20 6 9 17 4 12" />
            </Icon>
          </D>
        </C>
      </A>
    </LabelLabal>
  );
}

const LabelLabal = styled.label`
  cursor: pointer;
`;

const Icon = styled.svg`
  fill: none;
  stroke: white;
  stroke-width: 2px;
  display: block;
  height: 16px;
  width: 16px;
  stroke-width: 4;
  overflow: visible;
  cursor: pointer;
`;

const A = styled.span`
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 0px;
`;

const B = styled.input`
  position: absolute;
  opacity: 0;
  cursor: pointer;
`;

const C = styled.span`
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  height: 24px;
  width: 24px;
  text-align: center;
  overflow: hidden;
  vertical-align: top;
  border-radius: 4px;
  border: ${props => (props.checked ? 'none' : 'solid 0.1rem #dddddd')};
  background: ${props => (props.checked ? 'black' : 'black')};
  color: rgb(255, 255, 255);
  cursor: pointer;

  ${Icon} {
    visibility: ${props => (props.checked ? 'hidden' : 'visible')};
  }
`;
const D = styled.span`
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: block;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: 2px;
  margin-left: 3px;
  color: rgb(255, 255, 255);
  cursor: pointer;
`;

export default Checkbox;

您不必注意標簽名稱。我累到連名字都顧不上了。

我真的很想解決這個問題！！

uj5u.com熱心網友回復：

該代碼使用了一個輸入復選框和一個 svg。因此，即使您的復選框被切換，svg 也不會根據切換狀態而改變。

此外，由于<B type="checkbox" isChecked={isChecked} {...props} />是一個輸入復選框組件，并且您正在控制組件值，因此您需要使用一個checked屬性。我認為isChecked是打錯字了。

所以，如果你更新isChecked到checked和傳遞checked價值的SVG動態更新CSS，它會正常作業。

這是一個有效的代碼沙箱。

更新的 CheckBox.js

import React, { useState } from 'react';
import styled from 'styled-components';

function Checkbox({ isChecked, ...props }) {
  return (
    <LabelLabal>
      <A>
        <B type="checkbox" checked={isChecked} {...props} />
        <C>
          <D>
            <Icon checked={isChecked} viewBox="0 0 24 24">
              <polyline points="20 6 9 17 4 12" />
            </Icon>
          </D>
        </C>
      </A>
    </LabelLabal>
  );
}

const Icon = styled.svg`
  fill: none;
  stroke: ${(props) => (props.checked ? "white" : "none")};
  stroke-width: 2px;
  display: block;
  height: 16px;
  width: 16px;
  stroke-width: 4;
  overflow: visible;
  cursor: pointer;
`;

// rest of the styling

標籤：反应

上一篇：POST請求適用于Postman但不適用于axios.post()

下一篇：如何使用RTK查詢獲取X-Total-Count標頭？