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中的点击函数来更改div的类,我找不到如何做到这一点的示例,以便我可以理解它是如何工作的。谢谢。
最佳答案
这是一个使用 refs 的示例:
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')
请告诉我这是否适合您。 (如果是的话,感谢 Abderrahman)
关于javascript - 如何在nextjs中通过不同元素的onClick修改一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56092371/