React 教程

React:

<button onClick={shoot}>Take the Shot!</button>

HTML:

<button onclick="shoot()">Take the Shot!</button>

实例:

将 shoot 函数放在 Football 组件中:

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

运行实例 »

实例:

将 "Goal!" 作为参数发送到shoot函数，使用箭头函数:

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

运行实例 »

实例:

箭头函数:手动发送事件对象:

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' 代表触发函数的 React 事件，在本例中为 'click' 事件
    */
  }

  return (
    <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

运行实例 »