Реагировать JS JSX Показать или скрыть на основе другого компонента переключения

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

Чтобы отключить панель, вы можете просто установить переменную переключения на false.

Чтобы отключить первую панель при переключении второй панели, вы можете сделать следующее:

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

Аналогичным образом, чтобы отключить вторую панель при переключении первой панели, вы можете сделать следующее:

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

Это позволит убедиться, что при переключении одной панели другая всегда выключена,чтобы у вас не было обеих панелей одновременно.

Answer 2

[Редактировать: реквизиты доступны только для чтения, и хотя мой исходный ответ и принятый ответ были идентичны и выполняют свою задачу, я корректирую свой ответ, чтобы показать «правильный» способ сделать это посредством манипулирования состоянием, а не реквизитом.]

Я не знаю, почему вы отслеживаете изменения на this.props вместо this.state, но есть один способ :

Для добавления в конструктор:

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

Для Toggle One:

onChange={ () => this.setState({ toggleOne: !this.state.toggleOne, toggleTwo: !this.state.toggleOne ? false : this.state.toggleTwo }) }

Для Toggle Two:

onChange={ () => this.setState({ toggleTwo: !this.state.toggleTwo, toggleOne: !this.state.toggleTwo ? false : this.state.toggleOne }) }

И изКонечно, установите атрибуты checked на this.state.toggledOne/Two.

Логика:

1. Установите нас в противоположное состояние.
2. Если наше текущее состояниевыключено (false), и мы включены (! false), выключите нашего соседа (false);если мы включаем и выключаем, оставьте нашего соседа там, где он есть (который в большинстве случаев будет выключен, потому что мы только что были включены).

Моя дополнительная проверка истина / ложь в конце по сравнению со значением по умолчанию false в принятом ответе предназначена для выявления случая, когда оба переключателя были открыты преднамеренно (т.е. программно).Возможно, это не относится к вашему сценарию, но для тех, кто ищет подобное решение и может захотеть эту функцию, она у вас есть.