Question

在jQuery中，在html元素上触发事件时，执行一次操作非常简单。

例如：

$(".dropdown-trigger").on("click", function(event) {
  var self = this;
  $("html").one("click", function() {
    $(self).parents(".dropdown").removeClass("active");
  });
  $(this).parents(".dropdown").toggleClass("active");

  event.stopPropagation();
});

在React中，它并不那么容易。

如何在单击html元素时在React中执行操作，并且只执行一次该操作（类似于我的jQuery代码）？

Answer 1

使用useState，也适用于React> 16.8

import React, { useState } from 'react';

const App = () => {
  const [clicked, setClicked] = useState(false);
  const myFunc = () => alert('hey');
  const onClick = (event) => {
    if (!clicked) {
      setClicked(true);
      myFunc(event);
    }
  };
  return <button onClick={onClick}>Click on me (once)</button>;
};

Answer 2

一旦元素触发了它的事件，就会翻转状态，当你的状态发生变化时，react会重新渲染组件并且不会显示。以下是实现该结果的一种方法示例。

_onEvent() {
    this.setState({
        hasTriggered: true
    })
}


render() {
    return (
        <div>
            {
                !this.state.hasTriggered ?
                <MyElement onClick={this._onEvent.bind(this)} /> : null
            }
        </div>
    )
}

Answer 3

基于杰克的回应，我认为这可能会有所帮助。

在componentDidUpdate上，您可以检查状态，并添加或删除document.body的听众。

class DropDownMenu extends Component {
    componentDidUpdate() {
      if (this.state.hasTriggered) {
        document.body.addEventListener('click', this.closeMenu);
      } else {
        document.body.removeEventListener('click', this.closeMenu);
      }
    }

    dropDownMenu() {
      if (this.state.hasTriggered) {
        return (
          <div>
            Expanded Menu
            <ul>
              <li>DropDownItem!</li>
              <li>DropDownItem!</li>
              <li>DropDownItem!</li>
            </ul>
          </div>
        )
      } else {
        return (
          <div>
            <button onClick={this.openMenu.bind(this)}>
              Collapsed Menu
            </button>
          </div>
        )
      }
    }
    openMenu(e) {
      e.preventDefault();
      this.setState({
        hasTriggered: true
      })
    }
    closeMenu(e) {
      e.preventDefault();
      this.setState({
        hasTriggered: false
      })
    }

    render() {
        return (
            <div>
                { this.dropDownMenu }
            </div>
        );
    }
}

我没有对此进行测试，所以我很乐意接受任何反馈

Answer 4

使用参考。不是很漂亮，但至少可以正常工作。这需要React> 16.8

$( "h3" ).droppable({
    over:function(ev, ui){
        var id = $(ev.target).next().show();
        $( ".sortable" ).sortable('refresh');
    }
 });

React：当单击html元素时，仅执行一次操作

4 个答案: