javascript - 如何将事件从组件传递到嵌套函数？

Question

我有两个拆分函数，我需要将一个值从一个传递到另一个，如下所示。const handleClick = icon.onClick(category)和 和有什么不一样const handleClick = () => icon.onClick(category)？

以及如何event将组件传递给handleClick()函数？

export const useCategories = () => {
  const handleClick = (category, something) => {
    event.stopPropagation() // <-- 3. How to get event?
    console.log(category, something) // <-- 4. Get every value
  }

  return {
    icon: {
      onClick: (category) => handleClick(category, 'anything') // <-- 2. add second var value
    }
  }
}

export const Categories = () => {
  const { icon } = useCategories()

  return (
      <div>
        {categories.map((category) => {
          const handleClick = icon.onClick(category) // <-- 1. pass category value
          return <Icon onClick={handleClick} />)}
        }
      </div>
  )
}

标签： javascriptreactjs

Answer 1

您需要通过所有点击处理程序代理事件对象。我喜欢使用 curried 函数来使附加点击处理程序更简单一些。不要忘记为映射的图标添加一个反应键。

export const useCategories = () => {
  const handleClick = (event, category, something) => {
    event.stopPropagation();
    console.log(category, something);
  };

  return {
    icon: {
      // curried function to receive category and return onClick handler
      onClick: category => event => handleClick(event, category, 'anything'),
    }
  }
}

export const Categories = () => {
  const { icon } = useCategories();

  return (
    <div>
      {categories.map((category, index) => (
        <Icon
          key={index}
          onClick={icon.onClick(category)} // <-- set category
        />
      )
    </div>
  );
}