0

目标

我想将布尔值从复选框传递到父元素以更改那里的状态。

描述

我有以下功能（缩短）：

 export default function Contact() {
      const [isChecked, setIsChecked] = React.useState();

...

    function handleCheck() {
        setIsChecked(!isChecked);
      }

...

return (

...

     <CheckBoxContainer>
                    <CheckBox type="checkbox" defaultChecked={isChecked} onChange={handleCheck} />{" "}
                    <CheckBoxText>
                      Ich habe die{" "}
                      <SmallInlineLink to="/privacy">Datenschutzbestimmungen</SmallInlineLink> zur
                      Kenntnis genommen.
                    </CheckBoxText>
                  </CheckBoxContainer>

<Button
              disabled={
                isChecked !== true
              }
            >
              Abschicken
            </Button>

)}

到目前为止有效。但我想以CheckBoxContainer几种形式重用它，为此我想让它成为一个功能组件。

它应该如下所示：

export default function Contact() {
          const [isChecked, setIsChecked] = React.useState();

    ...

        function handleCheck() {
            setIsChecked(!isChecked);
          }

    ...

    return (

    ...

         <CheckBoxContainer checked={isChecked} onChange={handleCheck} />


    <Button
                  disabled={
                    isChecked !== true
                  }
                >
                  Abschicken
                </Button>

    )}

所以我有一个可重复使用的Checkboxcontainer，像这样：

import styled from "@emotion/styled";
import React from "react";
import { CheckBox } from "../Form/InputFields";
import { CheckBoxText } from "../Text";
import { SmallInlineLink } from "../Navigation/NavLinks";

export const Container = styled.div`
  display: flex;
`;

export default function CheckBoxContainer(isChecked, handleCheck) {
  console.log("Checkbox Component" + isChecked);
  return (
    <Container>
      <CheckBox type="checkbox" defaultChecked={!isChecked} onChange={() => handleCheck} />{" "}
      <CheckBoxText>
        Ich habe die <SmallInlineLink to="/privacy">Datenschutzbestimmungen</SmallInlineLink> zur
        Kenntnis genommen.
      </CheckBoxText>
    </Container>
  );
}

问题

如何将布尔值从CheckBoxContainer正确的传递到父元素？

目前，console.log 向我显示了一个 [object Object]

可能的解决方案

父元素中的函数调用：

{CheckBoxContainer(isChecked, () => setIsChecked(!isChecked))}

子功能：

export default function CheckBoxContainer(isChecked, setIsChecked) {
  return (
    <Container>
      <CheckBox
        type="checkbox"
        defaultChecked={isChecked}
        onChange={() => setIsChecked(!isChecked)}
      />{" "}
      <CheckBoxText>
        Ich habe die <SmallInlineLink to="/privacy">Datenschutzbestimmungen</SmallInlineLink> zur
        Kenntnis genommen.
      </CheckBoxText>
    </Container>
  );
}

谢谢@viknek

4

1 回答 1

0

有两种解决方案：

  1. 您可以CheckBoxContainer在 jsx 中作为功能组件调用：

{ CheckBoxContainer(isChecked, () => setIsChecked(!isChecked)) }.

这种方式CheckBoxContainer被视为一个函数，因此 in 的两个参数CheckBoxContainer被视为您传递给函数的相应参数，在这种情况下isChecked和callback.

  1. 当您调用<CheckBoxContainer />和传递道具时，它们可以通过CheckBoxContainer以下方式访问：props.isChecked和props.handleCheck. 所以你可以使用解构：

const CheckBoxContainer = ({ isChecked, handleCheck} ) => ...

或使用点符号访问道具

const CheckBoxContainer = (props) => (<div onClick={props.handleCheck}>{props.isChecked}</div>)

于 2020-02-08T11:21:35.613 回答