我有一个包含使用多个详细信息/摘要标签的 React 组件的页面:
const React = require("react");class samplePage 扩展了 React.Component {使成为() {const siteConfig = this.props.config;返回 (<div><详情><总结>第一个文字细节.</总结></详情><详情><总结>第二个文本细节.</总结></详情><详情><总结>第三个文字细节.</总结></详情><button onClick="OpenAll()">打开所有详细信息.</button><button onClick="CloseAll()">关闭所有详细信息.</button>);}}module.exports = samplePage;
我有一个全局 siteConfig.js 来配置我的脚本:
脚本:["js/script1.js","js/script2.js",js/script3.js"],使用 2 个函数来添加或删除上述详细信息标签中的open"属性:
function CloseAll() {$("详情").removeAttr("打开");}函数 OpenAll() {$("details").attr("open", "open");}我知道我的主脚本文件中的 2 个函数是通过 siteConfig.js 导入的，因为我的其他函数正常工作.从示例页面可以看出，启动 OpenAll/CloseAll 函数的按钮标签与其他细节标签位于一个 div 内.
我认为我的方法很好，但两个按钮都没有产生预期的效果.我怀疑这与函数作用域或我当前的设置有关(我使用的是 Docusaurus，它有点类似于创建 React App").我不认为我为这样的项目做过任何不寻常的事情.感谢任何反馈.
使用 state 将属性设置为 true 或 false，就像这样.(请注意，您可以使用像这里这样的钩子，但也可以使用旧的 state 和 setState.此外，您不需要 siteConfig 或定义的两个函数
const React = require("react");const samplePage = () =>{const [isOpen, setIsOpen] = React.useState(false);返回 (<div><详细信息 open={isOpen}><总结>第一个文字细节.</总结></详情><详细信息 open={isOpen}><总结>第二个文本细节.</总结></详情><详细信息 open={isOpen}><总结>第三个文字细节.</总结></详情><button onClick={() =>setIsOpen(false)}>打开所有详细信息.</button><button onClick={() =>setIsOpen(true)}>关闭所有详细信息.</button>);}}module.exports = samplePage;
I have a page with a React component that uses multiple detail/summary tags:
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;
I have a global siteConfig.js to configure my scripts:
scripts: [
"js/script1.js",
"js/script2.js",
"js/script3.js"
],
With 2 functions to add or remove the "open" attribute from the above detail tags:
function CloseAll() {
$("details").removeAttr("open");
}
function OpenAll() {
$("details").attr("open", "open");
}
I know the 2 functions in my main script file are imported through siteConfig.js, as my other functions are working without issue. As can be seen from the sample page, the button tags that initiate the OpenAll / CloseAll functions are located within a div with the other detail tags.
I thought my method was good, but neither button produces the intended effect. I suspect this has something to do with the function scope or something about my current set-up (I'm using Docusaurus, which is kinda similar to "Create React App"). I don't think I've done anything out of the ordinary for a project like this. Appreciate any feedback.
Use state to set the attribute to true or false, like that. (Note that you can use hooks like here but also good old state and setState. Also you don't need siteConfig or the two functions defined there.
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;
这篇关于如何添加或删除“打开"来自反应组件中所有详细信息标签的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！