如何在 NextJS 中使用 onClick 事件调用 2 个函数？

Question

我的 NextJs 应用程序中已经有 2 个常量 =>“toggleMenu”和“changeLanguage”。当有人点击菜单中的语言转换器时，我需要它来调用这两个函数。

我试过了，但它似乎在我的代码中不起作用，它卡在其中一个函数上，说它未定义。如果我只尝试运行这个函数，它确实会按预期工作，所以问题一定出在这段代码上：

onClick={() => { changeLanguage(); toggleMenu() }}

我在网上找到了这个，但它也不起作用，因为我相信语法：

onclick="f1();f2()"

任何人都可以提出其他建议吗？谢谢

编辑：

这是我尝试调用的 2 个函数，但在“changelanguage”函数上出错，特别是在读取“e.target.value”时出现 => undefined。

const Navbar = (props) => {
  
  const [isOpen, setOpen] = useState(false);
  const toggleMenu = () => setOpen(!isOpen);

  useEffect(() =>{
    document.body.style.overflowY = isOpen ? 'hidden' : 'auto';
  }, [isOpen])

  const router = useRouter();
  const { locale } = router
  const t = locale === 'en' ? en : es;

  const changeLanguage = (e) => {
    router.push(router.pathname, router.pathname,{
        locale: e.target.value,
    })
  }

  return (
      <header className="relative bg-black">
        <div className="w-full px-5 sm:px-10">
          <div className="flex justify-between items-center py-1 md:space-x-10">

            {/* Logos on the left */}

            <div className="flex justify-start lg:w-0 lg:flex-1">
            </div>

            {/* Hamburger menu icon */}

            <div className="flex md:hidden">
              <button aria-label="menu" onClick={toggleMenu} className="flex text-white hover:text-gray-500">
              </button>
            </div>

            {/* nav links and language changer*/}

            <nav className="hidden md:flex space-x-10 font-light text-white">
              <Link href="servicios">
                <a className='hover:border-b' >{t.navbar.serviciosLink}</a>
              </Link>

              <select defaultValue={ router.locale } onChange={changeLanguage} className='bg-black text-white'>
                <option className=' font-light' value='es'>ES</option>
                <option className=' font-light' value='en'>EN</option>
              </select>
            </nav>
          </div>
        </div>
        {isOpen && (
          <div className="absolute top-0 flex flex-col place-content-between w-full h-screen transition transform origin-left md:hidden bg-white z-50 px-5 sm:px-10 py-1">

            <div className="flex items-center justify-between">

              {/*Left logo*/}

              <div className='flex'>
                
              </div>

              {/* close icon*/}

              <div className="flex">
                <button aria-label="close-menu" onClick={toggleMenu} className="text-black hover:text-gray-500">
                </button>
              </div>

            </div>

            {/* navigation links */}

            <div className="flex">
            </div>

            {/* social links and language changer */}

            <div className='flex text-black text-xl font-light justify-between mb-5'>
              
              <div className='flex flex-col'>
                  <button onClick={ changeLanguage } className='cursor-pointer font-light' value='es'>ES</button>
                  <button onClick={ changeLanguage } className='cursor-pointer font-light' value='en'>EN</button>
              </div>
              
            </div>

          
            
          </div>
        )}
      </header>
  );
};

export default Navbar

Answer 1

您不能在按钮的 onClick 事件上使用 e.target.value。我要做的是创建另一个函数 handleSelectChange 来保持所选选项的状态。

.....
const [selectValue, setSelectValue] = useState("defaultValue");
.....
const handleSelectChange = (event) => {
  setSelectValue(event.target.value);
}
.....
<select defaultValue={ router.locale } onChange={handleSelectChange} className='bg-black text-white'>

然后为您的按钮调用您的 changeLanguage 函数，该函数现在实现为使用状态变量

  const changeLanguage = (e) => {
    router.push(router.pathname, router.pathname,{
        locale: selectValue,
    })
  }

老实说，我们并不真正了解实际问题出在哪里。是未定义的事件还是你不能调用两个函数的事实。

Answer 2

一个点击事件可以调用两个函数


export default function Somepage() {

  const functionOne = event =>{
    console.log("function one");
    
  }
  
  const functionTwo = event =>{
    console.log("function two");

  }

  const mainFunction = event => {
    functionOne(event)
    functionTwo(event)
  }

  return (
    <>
    <button onClick={mainFunction}>click to change</button>
    </>
  )
}

如何在 NextJS 中使用 onClick 事件调用 2 个函数？

How do I call 2 functions with a onClick event in NextJS?

javascript

reactjs

next.js

一个点击事件可以调用两个函数