Как добавить или удалить атрибут «открытый» из всех тегов сведений в компоненте реакции?

Question

У меня есть страница с компонентом React, который использует несколько подробных / сводных тегов:

const React = require("react");

class samplePage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return (

        <div>
            <details>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick="OpenAll()">Open All Details.</button>
            <button onClick="CloseAll()">Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;

У меня есть глобальный siteConfig.js для настройки моих скриптов:

scripts: [
    "js/script1.js",
    "js/script2.js",
    "js/script3.js"
],

С 2 функциями для добавления или удаления атрибута «open» из указанных выше тегов деталей:

function CloseAll() {
  $("details").removeAttr("open");
}

function OpenAll() {
    $("details").attr("open", "open");
}

Я знаю, что две функции в моем основном файле сценария импортируются через siteConfig.js, так как другие мои функции работают без проблем. Как видно из примера страницы, теги кнопок, которые запускают функции OpenAll / CloseAll, расположены внутри div с другими тегами деталей.

Я думал, что мой метод хорош, но ни одна кнопка не дает желаемого эффекта. Я подозреваю, что это как-то связано с областью действия функции или с моей текущей настройкой (я использую Docusaurus, который чем-то похож на «Create React App»). Не думаю, что я сделал что-то необычное для такого проекта. Цените любую обратную связь.

javascript html reactjs docusaurus

1

Lichtung 27 Окт 2019 в 14:39

Answer 1

Используйте состояние, чтобы установить для атрибута значение true или false, например. (Обратите внимание, что вы можете использовать такие хуки, как здесь, но также и старые добрые state и setState. Также вам не нужны siteConfig или две определенные там функции.

const React = require("react");

const samplePage = () => {
    const [isOpen, setIsOpen] = React.useState(false); 

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick={() => setIsOpen(false)}>Open All Details.</button>
            <button onClick={() => setIsOpen(true)}>Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;

4

Lichtung 28 Окт 2019 в 14:49

1

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

–

Lichtung

27 Окт 2019 в 15:40

Я внес изменения, чтобы исправить ошибочные операторы import и export, кнопки id(s), и они были неправильно отклонены @paweł-psztyć и @moob. Первоначально он был одобрен @reuben-mallaby, который, очевидно, понял цель редактирования. Конечно, сайт не позволяет мне отвечать... кроме как на этот комментарий. Я написал OP... Это респондент по ошибке изменил код примера (да, его решение в порядке).

–

Lichtung

28 Окт 2019 в 12:44

Answer 2

Мне пришлось использовать useEffect, чтобы заставить это работать.

  const closeDetails = () => {
    console.log('click')
    setIsOpen(false)
  }

0

Tyler Morales 22 Янв 2022 в 07:53

Как добавить или удалить атрибут «открытый» из всех тегов сведений в компоненте реакции?

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript