如何在nextjs中通过不同元素的onClick修改一个元素？

Question

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&hellip;"/>
                <Link href="#"><a onClick={myClick} className="input_icon"></a></Link>
            </div>
        </section>
);

我正在使用 nextjs，并且尝试通过另一个 div 中的单击函数更改 div 的类，我找不到如何执行此操作的示例，以便我了解它是如何工作的。谢谢。

Answer 1

这是使用 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&hellip;"
        />
        <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')

让我知道这是否适合您。（如果是的话，感谢阿卜杜勒拉赫曼）