React中按钮需双击触发Onclick事件的解决方法求助

你的filter函数被绑定在按钮的onClick事件中，每次点击按钮都会执行该函数，而函数内部又会重复给按钮添加click事件监听器：

• 第一次点击时，只是完成了监听器的绑定，并未触发过滤逻辑；
• 第二次点击才会触发刚绑定的监听器，因此出现双击才生效的情况。

同时，这种混合React和原生DOM操作的写法不符合React的设计模式，容易引发更多不可预期的副作用。

用React的useState钩子管理过滤状态，替代原生DOM操作，这是React项目的标准写法：

import { useState } from 'react';
// 导入你的组件、图片资源及um/dois等函数

export default function ProductFilter() {
  // 用状态跟踪当前激活的过滤项ID
  const [activeFilter, setActiveFilter] = useState('um');

  // 统一处理过滤逻辑
  const handleFilterClick = (filterId) => {
    setActiveFilter(filterId);
    // 根据ID调用对应的函数
    switch (filterId) {
      case 'um':
        um();
        break;
      case 'dois':
        dois();
        break;
      case 'tres':
        tres();
        break;
      case 'quatro':
        quatro();
        break;
      case 'cinco':
        cinco();
        break;
      case 'seis':
        seis();
        break;
      case 'sete':
        sete();
        break;
      default:
        break;
    }
  };

  return (
    <Container fluid="true">
      {/* Banner */}
      <img src={BannerExample} width="1920" className="img-fluid mx-auto d-block banner-image" alt="Banner" />

      {/* 产品过滤器 */}
      <div className="filter-scroller">
        {['um', 'dois', 'tres', 'quatro', 'cinco', 'seis', 'sete'].map(filterId => (
          <div key={filterId} className="filter-element-div">
            <button
              id={filterId}
              type="button"
              className={`filter-element filter-button ${activeFilter === filterId ? 'active' : ''}`}
              onClick={() => handleFilterClick(filterId)}
            >
              <img alt="FilterItem" src={ShortsFiltro} width="100" className="img-fluid filter-element" />
            </button>
          </div>
        ))}
      </div>

      {/* 产品列表 */}
      <Container fluid="lg Card-Container">
        <h1 className="titulo-de-categoria">Produtos</h1>
        <Row xs={2} md={4} className="g-4 filter-items">
          {[
            { id: 'um', img: ShortsJapones, price: 'R$50,00', text: 'Shorts nike Preto, Branco e Vermelho' },
            { id: 'dois', img: ShirtNike, price: 'R$70,00', text: 'Shorts nike Preto, Branco e Vermelho' },
            { id: 'tres', img: ShortsJapones, price: 'R$50,00', text: 'Shorts nike Preto, Branco e Vermelho' },
            { id: 'quatro', img: ShirtNike, price: 'R$70,00', text: 'Shorts nike Preto, Branco e Vermelho' },
            { id: 'cinco', img: ShortsJapones, price: 'R$50,00', text: 'Shorts nike Preto, Branco e Vermelho' },
            { id: 'seis', img: ShirtNike, price: 'R$70,00', text: 'Shorts nike Preto, Branco e Vermelho' },
            { id: 'sete', img: ShortsJapones, price: 'R$50,00', text: 'Shorts nike Preto, Branco e Vermelho' },
          ].map(product => (
            <Col
              key={product.id}
              className="filter-item"
              style={{ display: product.id === activeFilter ? 'block' : 'none' }}
            >
              <a href="/produto">
                <Card>
                  <Card.Img variant="top" src={product.img} />
                  <Card.Body className="d-grid gap-2">
                    <Card.Text className="value">{product.price}</Card.Text>
                    <Card.Text>{product.text}</Card.Text>
                  </Card.Body>
                </Card>
              </a>
            </Col>
          ))}
        </Row>
      </Container>
    </Container>
  );
}

1. 状态驱动UI：用useState跟踪激活的过滤项，直接通过状态控制按钮的active类和产品的显示/隐藏，无需手动操作DOM。
2. 避免重复绑定：点击事件直接触发状态更新和逻辑执行，不会重复添加监听器。
3. 代码简化：通过数组映射生成按钮和产品卡片，减少重复代码，提升可维护性。

如果必须保留原生DOM操作，需确保事件监听器只绑定一次，在组件挂载时执行：

import { useEffect } from 'react';

export default function ProductFilter() {
  useEffect(() => {
    const filters = document.querySelectorAll('.filter-button');
    const allFilterItems = document.querySelectorAll('.filter-item');
    const allFilterBtns = document.querySelectorAll('.filter-element');

    // 切换按钮激活状态
    const setActiveButton = (activeBtn) => {
      filters.forEach(btn => btn.classList.remove('active'));
      activeBtn.classList.add('active');
    };

    // 过滤产品
    const showFilteredContent = (btn) => {
      allFilterItems.forEach(item => {
        item.style.display = item.classList.contains(btn.id) ? 'block' : 'none';
      });
      // 调用对应函数
      switch (btn.id) {
        case 'um': um(); break;
        case 'dois': dois(); break;
        // 其他case补充
      }
    };

    // 绑定事件
    filters.forEach(btn => btn.addEventListener('click', () => setActiveButton(btn)));
    allFilterBtns.forEach(btn => btn.addEventListener('click', () => showFilteredContent(btn)));

    // 组件卸载时清理监听器，避免内存泄漏
    return () => {
      filters.forEach(btn => btn.removeEventListener('click', setActiveButton));
      allFilterBtns.forEach(btn => btn.removeEventListener('click', showFilteredContent));
    };
  }, []); // 空依赖数组，仅挂载时执行一次

  // JSX部分：按钮的onClick只需调用对应函数，无需再执行filter()
  return (
    // 原JSX代码，按钮改为onClick={() => um()}等
  );
}

内容的提问来源于stack exchange，提问作者Saimon Muhamed