基于另一个Toggle组件的JSX显示或隐藏

Question

我有两个切换组件，显示/隐藏面板在他们下面，这是良好的工作。然而，如果我切换第二个面板，我需要确保第一个面板关闭。和第一个一样，我不希望两个面板同时打开。

这里是我所拥有的一个基本例子。

<ToggleControl
    label={__( 'Toggle One' )}
    checked={ toggleOne }
    onChange={ () => this.props.setAttributes({ toggleOne: ! toggleOne }) }
/>

    { toggleOne ?
        <PanelBody>
            ... Show Panel 1 Stuff
        </PanelBody>
    : null }

<ToggleControl
    label={__('Add Image Divider')}
    checked={toggleTwo}
    onChange={() => this.props.setAttributes({ toggleTwo: !toggleTwo })}
/>

    { toggleTwo ?
        <PanelBody>
            ... Show Panel 2 Stuff
        </PanelBody>
    : null }

通过这样做，我可以在另一个按钮的onChange()中切换另一个面板.

onChange={() => this.props.setAttributes({ toggleTwo: !toggleTwo, toggleOne: !toggleOne })}

但我不想切换它，如果它已经关闭，似乎无法解决它。

谢谢。

Answer 1

若要关闭面板，只需将切换变量设置为false即可。

要在切换第二个面板时关闭第一个面板，可以执行以下操作：

onChange={() => this.props.setAttributes({ toggleTwo: !toggleTwo, toggleOne: false })}

同样，要在切换第一个面板时关闭第二个面板，可以执行以下操作：

onChange={() => this.props.setAttributes({ toggleOne: !toggleOne, toggleTwo: false })}

这将确保在切换一个面板时，另一个面板总是关闭的，这样您就不会同时切换两个面板。