将复选框布尔值传递给父反应组件

Question

目标

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

描述

我有以下功能（缩写）：

 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>
  );
}

问题

How do i pass the boolean from the CheckBoxContainer correctly to the parent element?

At the moment the console.log shows me an [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

Answer 1

有两种解决方法：

您可以调用 CheckBoxContainer 作为 jsx 中的功能组件：

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

这样 CheckBoxContainer 被视为一个函数，因此 CheckBoxContainer 中的两个参数被视为您传递给该函数的相应参数，在本例中 isChecked 和callback.

当您调用 <CheckBoxContainer /> 并传递道具时，它们可以在 CheckBoxContainer 中以这种方式访问：props.isChecked 和 props.handleCheck。所以你可以使用解构：

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

或使用点符号访问道具

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

将复选框布尔值传递给父反应组件

Pass checkbox boolean to parent react componenet

onchange

react-props

react-functional-component