[英]How to modify an element through a different element's onClick in nextjs?
import Link from 'next/link';
function myClick(e){
console.log(e);
}
const Index = () => (
<section className="min-vh-100">
<div className="input_bar border rounded-maximum p-1 mx-1 bg-white d-flex">
<input className="myButton submit_bar text-black" placeholder="Insert your input…"/>
<Link href="#"><a onClick={myClick} className="input_icon"></a></Link>
</div>
</section>
);
我正在使用nextjs,並且試圖通過另一個div中的click函數來更改div的類,我找不到如何執行此操作的示例,因此我可以理解它的工作原理。 謝謝。
這是使用引用的示例:
import Link from 'next/link'
const Index = () => {
let myDiv = React.createRef()
function myClick() {
myDiv.current.classList.add('add-this-class')
}
return (
<section className="min-vh-100">
<div
ref={myDiv}
className="input_bar border rounded-maximum p-1 mx-1 bg-white d-flex"
>
<input
className="myButton submit_bar text-black"
placeholder="Insert your input…"
/>
<Link href="#">
<a onClick={myClick} className="input_icon" />
</Link>
</div>
</section>
)
}
了解我在這里做什么。 我正在使用此行創建參考:
let myDiv = React.createRef()
然后,將其分配給要訪問的元素,在示例中,將其分配給div:
<div ref={myDiv} className="..." >
在onClick
函數上,我訪問div並添加一個類:
myDiv.current.classList.add('add-this-class')
讓我知道這是否適合您。 (如果這樣做,謝謝阿卜杜拉曼)
我用鈎子 。
const Index = () => {
const [className, setClassName] = useState("")
const myClick = () => {
setClassName("some-class")
}
return (
<div>
<button onClick={myClick}>Click me</button>
<div className={className}>Classname gets changes</div>
</div>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.