React 以函数式编程方式处理 DOM 事件并传参

2024-02-19 03:12:22

React 中的事件处理

在 React 中，你可以使用 onClick、onChange 等事件处理属性来为元素绑定事件处理程序。

const MyComponent = () => {
  const handleClick = () => {
    // 这里处理点击事件
  };

  return (
    <button onClick={handleClick}>点击我</button>
  );
};

当用户点击按钮时，handleClick 函数将被调用。

在循环中为元素绑定事件处理程序

在 React 中，你可以使用 map() 函数来循环创建元素并为每个元素绑定事件处理程序。

const items = [1, 2, 3, 4, 5];

const MyComponent = () => {
  const handleClick = (item) => {
    // 这里处理点击事件，item 是被点击的元素对应的数组项
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={() => handleClick(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
};

当用户点击列表中的任何一个元素时，相应的 handleClick 函数将被调用，并传递被点击的元素对应的数组项作为参数。

在事件处理函数中传递参数

在 React 中，你可以通过在事件处理函数中使用箭头函数来传递参数。

const MyComponent = () => {
  const handleClick = (item) => {
    // 这里处理点击事件，item 是被点击的元素对应的数组项
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={() => handleClick(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
};