0

我有一个带有 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 应用程序”）。我认为我没有为这样的项目做过任何不寻常的事情。感谢任何反馈。

4

2 回答 2

3

使用 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;
于 2019-10-27T12:01:14.720 回答
0

我必须使用 useEffect 才能使其正常工作。

  const closeDetails = () => {
    console.log('click')
    setIsOpen(false)
  }
于 2022-01-22T04:53:05.060 回答