迹忆客 专注技术分享

在 React 中传递事件和参数 onClick：

1. 将内联函数传递给元素的 onClick 属性。
2. 该函数应获取事件对象并调用 handleClick。
3. 将事件和参数传递给 handleClick。

const App = () => {
  const handleClick = (event, param) => {
    console.log(event);
    console.log(param);
  };

  return (
    <div>
      <button onClick={event => handleClick(event, 'jiyik.com')}>
        Click
      </button>
    </div>
  );
};

export default App;

我们将按钮元素上的 onClick 属性设置为内联箭头函数。

<button onClick={event => handleClick(event, 'jiyik.com')}>
  Click
</button>

箭头函数获取事件对象并调用 handleClick 函数，将事件和参数传递给它。

const handleClick = (event, param) => {
  console.log(event);
  console.log(param);
};

我们可以使用这种方法将尽可能多的参数传递给我们的事件处理函数。

请注意 ，我们正在将一个函数传递给 onClick 属性，而不是调用一个函数的结果。

<button onClick={event => handleClick(event, 'jiyik.com')}>
  Click
</button>

如果在将函数传递给 onClick 属性时调用该函数，例如 onClick={handleClick()}，当组件挂载时会立即调用。

当一个函数被传递给 onClick 属性时，它只会在事件被触发时被调用。

事件处理函数总是将事件对象作为第一个参数传递。

我们可以在事件对象之后将其他参数传递给函数。

使用返回函数的函数来传递参数

我们还可以定义一个函数，该函数接受一个或多个参数并返回一个接受事件对象的函数。

const App = () => {
  const handleClick = param => event => {
    console.log(event);
    console.log(param);
  };

  return (
    <div>
      <button onClick={handleClick('jiyik.com')}>
        Click
      </button>
    </div>
  );
};

export default App;

handleClick 函数采用参数参数并返回采用事件参数的函数。

调用 handleClick 函数的结果是另一个将事件对象作为参数的函数。

<button onClick={handleClick('jiyik.com')}>
  Click
</button>

onClick 属性仍然设置为一个函数，所以一切都像前面的代码示例一样工作。

使用数据属性传递事件和参数 onClick

我们还可以在元素上设置 data-* 属性以在 onClick 事件处理程序中传递参数。

const App = () => {
  const handleClick = event => {
    console.log(event);

    const example =
      event.currentTarget.getAttribute('data-example');
    console.log(example);
  };

  return (
    <div>
      <button data-example="jiyik.com" onClick={handleClick}>
        Click
      </button>
    </div>
  );
};

export default App;

我们在按钮元素上设置数据示例属性，并使用 getAttribute() 方法访问它。

<button data-example="jiyik.com" onClick={handleClick}>
  Click
</button>

该属性可以命名为任何名称，例如 data-bar 或 data-foo 。

我们可以通过事件对象的 currentTarget 属性访问该元素。

const handleClick = event => {
  console.log(event);

  const example =
    event.currentTarget.getAttribute('data-example');
  console.log(example); // 👉️ jiyik.com
};

事件的 currentTarget 属性使我们能够访问事件侦听器附加到的元素。

而事件的 target 属性为我们提供了对触发事件的元素的引用（可能是后代）。

我们可以在元素上设置多个 data-* 属性并使用 getAttribute() 方法访问它们。

Element.getAttribute 方法返回元素上给定属性的值。