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

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, что-то вроде «Создать приложение React»). Я не думаю, что я сделал что-то необычное для такого проекта. Ценю любые отзывы.

0
Lichtung

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;
58579048