Question

我有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 })}

但是如果它已经关闭并且似乎无法弄清楚，我不想切换它。

谢谢。

Answer 1

[编辑：道具是只读的，虽然我的原始答案和接受的答案相同并且可以解决问题，但我正在调整我的答案，以显示通过操纵状态而非道具来“正确”的方式。]

我不知道您为什么要跟踪onPaste(event: ClipboardEvent) { const clipboardData = event.clipboardData || window.clipboardData; const fixedLink = this.fixLink(clipboardData.getData('text')); window.setTimout(() => this.video.get('url').value = fixedLink); }而不是fixLink ~~上的更改，但这是一种方法~~：

要添加到构造函数中：

this.props

用于切换一：

this.state

第二个：

this.state = { toggleOne: this.props.toggleOne, toggleTwo: this.props.toggleTwo }

当然还要将onChange={ () => this.setState({ toggleOne: !this.state.toggleOne, toggleTwo: !this.state.toggleOne ? false : this.state.toggleTwo }) }属性设置为onChange={ () => this.setState({ toggleTwo: !this.state.toggleTwo, toggleOne: !this.state.toggleTwo ? false : this.state.toggleOne }) }。

逻辑：

将自己置于相反的状态。
如果当前状态为关闭（false），并且已打开（！false），请关闭邻居（false）;如果我们要从打开切换到关闭，请将我们的邻居留在原处（在大多数情况下，因为我们刚打开，所以它会关闭）。

我在末尾进行了额外的true / false检查，与接受的答案中的默认checked相比，目的是要抓住两个切换都被有意打开（即以编程方式）的情况。对于您的方案而言，情况可能并非总是如此，但是对于其他寻求类似解决方案并可能需要此功能的人来说，就在那里。

Answer 2

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

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

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

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

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

这将确保在切换一个面板时，另一面板始终处于关闭状态，这样就不会同时打开两个面板。

基于另一个Toggle组件进行React JS JSX显示或隐藏

2 个答案: