如何在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中的click函数来更改div的类，我找不到如何执行此操作的示例，因此我可以理解它的工作原理。谢谢你。

Answer 1

这是使用引用的示例：

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')

让我知道这是否适合您。（如果确实如此，则感谢Abderrahman）

Answer 2

我用钩子。

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>

    )

}