我有 2 个显示/隐藏面板的切换组件，它们工作正常。但是，如果我切换第二个面板，我需要确保第一个面板关闭。与第一个相同，我不希望两个面板同时打开。
这是我所拥有的一个基本示例。
<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 })}
但是如果它已经关闭并且似乎无法弄清楚，我不想切换它。
谢谢。
要关闭面板，您只需将切换变量设置为false。
要在切换第二个面板时关闭第一个面板，您可以执行以下操作：
onChange={() => this.props.setAttributes({ toggleTwo: !toggleTwo, toggleOne: false })}
同样，要在切换第一个面板时关闭第二个面板，您可以执行以下操作：
onChange={() => this.props.setAttributes({ toggleOne: !toggleOne, toggleTwo: false })}
这将确保在切换一个面板时，另一个面板始终处于关闭状态，这样您就不会同时打开两个面板。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句