Как добавить или удалить атрибут "open" из всех тегов сведений в компоненте реагирования? - PullRequest
Новая
       30

Как добавить или удалить атрибут "open" из всех тегов сведений в компоненте реагирования?

0 голосов
/ 27 октября 2019

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

1 Ответ

1 голос
/ 27 октября 2019

Используйте состояние, чтобы установить атрибут на 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;
...