React.js多按钮点击问题：仅单个按钮触发Alert弹窗

你的问题出在第二个按钮的事件属性拼写错误：把React事件的onClick写成了onCLick（字母C大写），React无法识别这个错误属性，因此点击时不会触发对应的createQuiz函数。

修正后的代码如下：

// Here will be the mentor page with a decent layout and buttons to future pages.
import React from 'react';
import '../Mentor/Button.css'
import { useNavigate } from "react-router-dom";


function Mentor() {

  function sayHello() {
    alert('Hello');
  }

  function createQuiz(){
      alert('You clicked me to create a quiz!');
  }



return (
<div>
    <button onClick={sayHello}>
      Click me!
    </button>

    <button onClick={createQuiz}>
      Create Quiz
    </button>
  </div> 
  );
}
  
export default Mentor;

关键说明 #

React中的事件绑定采用小驼峰命名法，比如onClick、onMouseEnter等，必须严格遵循正确拼写，大小写错误会导致事件无法正常绑定。

内容的提问来源于stack exchange，提问作者Larry Green