Question

我有一个复选框组件（材料UI），可以正常使用。选中/取消选中组件中的状态更新。但是，当我尝试在父组件中使用该状态时，我只会得到默认状态。即使改变。因此，我的MyParentComponent似乎不知道复选框中的状态变化吗？

我想使用复选框的状态来显示/隐藏其同级。

我觉得这应该很简单，但是我真的使自己感到困惑。任何帮助都会很棒！

非常感谢！

父组件

    import Checkbox from "../Checkbox";
    import Component from "../Component";
    import AnotherComponent from "../AnotherComponent";

    const MyParentComponent = ({ ...props }) => {
        return (
            <React.Fragment>
                <Checkbox />            // I want to use the visible boolean state here every time it changes
                <Component />           // To hide/show this component
                <AnotherComponent />    // And this one too...
            </React.Fragment>
        );
    };

复选框

    const Checkbox = () => {
        const [state, setState] = React.useState({
            checked: false,
            disabled: false
        });

        const handleChange = name => event => {
            setState({ ...state, [name]: event.target.checked });
        };

        return (
            <FormGroup row>
                <FormControlLabel
                    control={
                        <PinkSwitch
                            checked={state.checked}
                            onChange={handleChange("checked")}
                        />
                    }
                    label="Set live date &amp; time?"
                    disabled={state.disabled}
                />
            </FormGroup>
        );
    };

Answer 1

您需要的称为Lifting State Up。

在父组件中，保留复选框的状态并将其传递给其他子项。

const MyParentComponent = ({ ...props }) => {
        const [state, setState] = React.useState({
            checked: false,
            disabled: false
        });

        const handleChange = name => event => {
            setState({ ...state, [name]: event.target.checked });
        };

        return (
            <React.Fragment>
                <Checkbox state={state} handleChange={handleChange} /> // Passing the state of the parent to the children
                <Component state={state} />  // Passing the state of the parent to the children
                <AnotherComponent state={state} />  // Passing the state of the parent to the children
            </React.Fragment>
        );
    };


const Checkbox = ({state, handleChange}) => {
    return (
        <FormGroup row>
            <FormControlLabel
                control={
                    <PinkSwitch
                        checked={state.checked} // using the state from props
                        onChange={handleChange("checked")} // using the state from props
                    />
                }
                label="Set live date &amp; time?"
                disabled={state.disabled}
            />
        </FormGroup>
    );
};

Answer 2

react站点本身对此有一个great article的描述，称为提升状态（到最近的组件，在本例中为父组件）。您可能已经遇到过这种情况。

对于您而言，您可以更改Checkbox（例如）

    int N = A.length;

    int[] result = new int[N];
    result[0] = A[0];

    for (int i = 1; i < N; i++) {

        result[i] = result[i - 1];

        for (int j = 2; j <= 6; j++) {

            if (j > i) {
                break;
            }

            // 0, 1, 2, 3, 4
            result[i] = Math.max(result[i], result[i-j]);
        }

        result[i] += A[i];
    }

    return result[N - 1];
}

然后将两个道具传递给Checkbox：

const handleChange = name => event => {
  this.props.handleStateChange({ ...state, [name]: event.target.checked });
}

<PinkSwitch
  checked={this.props.masterState.checked}
  onChange={handleChange('checked')}
  />

其中this.handleChange（）是父级中的状态处理程序，而this.state.masterState是父级中的状态。

相同的masterState也可以传递给兄弟组件，因此他们知道Checkbox中所做的更改。

Answer 3

父级看不到状态，因为状态在子级中。将状态移到父级，然后向子级发送回调，他可以使用该回调来更改状态：

import Checkbox from "../Checkbox";
import Component from "../Component";
import AnotherComponent from "../AnotherComponent";

const MyParentComponent = ({ ...props }) => {
    const [state, setState] = React.useState({
        checked: false,
        disabled: false
    });

    const handleChange = name => event => {
        setState({ ...state, [name]: event.target.checked });
    };

    return (
        <React.Fragment>
            <Checkbox checked={state.checked} handleChange={handleChange} disabled={state.disabled}/>            // I want to use the visible boolean state here every time it changes
            <Component />           // To hide/show this component
            <AnotherComponent />    // And this one too...
        </React.Fragment>
    );
};

复选框

   const Checkbox = (props) => {
        return (
            <FormGroup row>
                <FormControlLabel
                    control={
                        <PinkSwitch
                            checked={props.checked}
                            onChange={props.handleChange("checked")}
                        />
                    }
                    label="Set live date &amp; time?"
                    disabled={props.disabled}
                />
            </FormGroup>
        );
    };

Answer 4

除了将孩子的状态提高到父母之外。还有另一种选择，就是ref

const ParentComponent = props => {
    const childRef = useRef(null)
    checkRef = () => console.log(childRef.current.state)

    return (
         <ChildComponent ref={childRef} />
    )
}

如果您的孩子处于更深层次，那么可能应该使用上下文以避免道具钻进

将组件状态传递给同级

4 个答案: