英文:
React toggle div visibility on button click
问题
我想要在按钮点击时切换div内容的可见性。为此，我正在使用UseId钩子，如下所示：
function toggleElement(elm_id) {
var el = document.getElementById(elm_id).nextElementSibling;
if (el.style.display === "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function FAQ(props) {
const clickedElm = useId();
return (
<div className="faq-item">
<button type="button" id={clickedElm} class="collapsible" onClick={toggleElement(this.id)}>
{props.question}
</button>
<div className="content">
<p>{props.answer}</p>
</div>
</div>
);
}
上面的代码显示了“未使用错误边界”。我是React的初学者，我不明白这是什么意思。代码哪里出错了？
英文:
I want to toggle the visibility of the div content on button click. For this, I'm using UseId hook as below
function toggleElement(elm_id) {
var el = document.getElementById(elm_id).nextElementSibling;
if (el.style.display === "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function FAQ(props) {
const clickedElm = useId();
return (
<div className="faq-item">
<button type="button" id = {clickedElm} class="collapsible" onClick={toggleElement(this.id)} >
{props.question}
</button>
<div className="content">
<p>{props.answer}</p>
</div>
The above code is showing Error Boundaries not used error. I'm beginner to React. I didn't understand what it is. Where the code is going wrong?
答案1
得分: 3
在React中，直接操作DOM是不被鼓励的，就像您在这里所做的一样：
if (el.style.display === "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
因为React有其自己的内部表示来确定何时更新以及何时不更新等等。
相反，React的做法是像这样做你想要的事情：
import React from 'react';
import './style.css';
export default function App() {
let [show, setShow] = React.useState(false);
return (
<div>
<button
onClick={() => {
setShow(!show);
}}
>
点击
</button>
{show && <div>你好</div>}
</div>
);
}
英文:
It is discouraged in react to touch the DOM directly like you do here:
if (el.style.display === "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
because react has its own internal representation to determine what to update what not, etc.
Instead react way of doing something like what you want is this:
import React from 'react';
import './style.css';
export default function App() {
let [show, setShow] = React.useState(false);
return (
<div>
<button
onClick={() => {
setShow(!show);
}}
>
Click
</button>
{show && <div>Hi</div>}
</div>
);
}
答案2
得分: 0
我已经解决了这个问题。请查看下面的代码：
function toggleElement(elm_id) {
var el = elm_id.currentTarget.nextElementSibling;
if (el.style.display === "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function FAQ(props) {
return (
<div className="faq-item">
<button type="button" id='btntest' class="collapsible" onClick={toggleElement}>
{props.question}
</button>
<div className="content">
<p>{props.answer}</p>
</div>
</div>
)
}
这里不需要使用 UseId 钩子，并且我只是更新了你的一些代码行。尝试这个，让我知道是否对你有用。
英文:
I have solved this issue. please check below code :-
function toggleElement(elm_id) {
var el = elm_id.currentTarget.nextElementSibling;
if (el.style.display === "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function FAQ(props) {
return (
<div className="faq-item">
<button type="button" id='btntest' class="collapsible" onClick={toggleElement}>
{props.question}
</button>
<div className="content">
<p>{props.answer}</p>
</div>
</div>
)
}
There is no need to use UseId hook here and I have just updated some line of your code. Try this out and let me know if it works for you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论