當我單擊一個按鈕時，如何在同一個組件中定位不同的反應元素，當我在 App.js 中多次重用該組件時如何作業？
我創建了一個具有 div 和一個按鈕的反應組件。默認情況下，我通過創建“隱藏”CSS 樣式并為 div 賦予“隱藏”類來隱藏 div。現在我想要實作的是，當我單擊按鈕時，它將呼叫一個函式，該函式將通過從其 classList 中洗掉隱藏類來使 div 變得可見。我的反應組件是用類創建的，我在建構式中系結了“this”關鍵字。
現在我已經開始在我的 App.js 中的四個位置呼叫上面的可重用組件。在組件的第一個實體上，當我單擊按鈕時，div 會按預期變為可見，但在其他情況下，當我單擊按鈕時，其他相應的 div 不會按組件實體的預期變為可見。所以我的按鈕點擊只會影響我的反應組件的第一個實體，而其余的不會相應地采取行動。
這是我通過單擊按鈕呼叫的函式
handleFinish() {
console.log("CLickedddd");
const editBtn = document.querySelectorAll(".ResetButton");
for (let i = 0; i < editBtn.length; i ) {
editBtn[i].classList.remove("hidden");
}
這是按鈕和 div：
<button id="finish" onClick={this.handleFinish}>
Finish
</button>
<div style={{height: 300, width: 300, backgroundColor: "red"}} class="hidden">
</div>
uj5u.com熱心網友回復：
您應該使用狀態變數來控制 div 的可見性。
class App extends Component {
constructor() {
super();
this.state = { hidden: false };
}
handleFinish = () => {
console.log("CLickedddd");
this.setState({ hidden: !this.state.hidden });
};
render() {
return (
<>
<button id="finish" onClick={this.handleFinish}>
Finish
</button>
<div
style={{ height: 300, width: 300, backgroundColor: "red" }}
className={this.state.hidden ? "hidden" : ""}
></div>
</>
);
}
}
看到這個沙箱
uj5u.com熱心網友回復：
你可以這樣試試：
export default function App() {
const handleFinish = () => {
const myDiv = document.getElementById("myDiv");
myDiv.classList.remove("hidden");
};
return (
<div className="App">
<button id="finish" onClick={handleFinish}>
Finish
</button>
<div
id="myDiv"
style={{ height: 300, width: 300, backgroundColor: "red" }}
className="hidden"
></div>
</div>
);
}
您可以為目標 div 分配一個 id 或 className，并且在onClick句柄上您可以從 div 中洗掉該類。
在這里，是作業代碼框。
但是，如果您想做更多類似反應的方式，比這更好，您可以為此 div 可見性創建一個狀態，然后更新該狀態以使該 div 可見。像這樣：
export default function App() {
const [divVisibility, setDivVisibility] = useState(false);
const handleFinish = () => {
setDivVisibility(true);
};
return (
<div className="App">
<button id="finish" onClick={handleFinish}>
Finish
</button>
<div
id="myDiv"
style={{ height: 300, width: 300, backgroundColor: "red" }}
className={divVisibility ? "" : "hidden"}
></div>
</div>
);
}
而且，這是它的沙箱。
#PS：我已經使用 CSShidden類來使它實際上不顯示任何內容。我希望您使用過類似的 CSS，或者您使用過提供此類的框架。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/496441.html
標籤：javascript 反应
上一篇：Vue承諾錯誤，我的承諾有誤
下一篇：REACT重復鍵警告