时间戳

首页 > 解决方案 > 如何从反应组件的所有详细信息标签中添加或删除“打开”属性？

javascript - 如何从反应组件的所有详细信息标签中添加或删除“打开”属性？

问题描述

我有一个带有 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 个函数从上述详细标签中添加或删除“打开”属性：

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

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

我知道我的主脚本文件中的 2 个函数是通过 导入的siteConfig.js，因为我的其他函数可以正常工作。从示例页面可以看出，启动OpenAll/功能的按钮标签与其他详细信息标签CloseAll位于 a 内。div

我认为我的方法很好，但是两个按钮都没有产生预期的效果。我怀疑这与函数范围或我当前的设置有关（我使用的是 Docusaurus，有点类似于“创建 React 应用程序”）。我认为我没有为这样的项目做过任何不寻常的事情。感谢任何反馈。

标签： javascripthtmlreactjsdocusaurus

解决方案

使用 state 将属性设置为trueor 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;

推荐阅读