ReactJS |让onClick和onFocus共调用同一个方法一次

Question

我有一个使用onClick和onFocus的组件。这两个事件调用从API加载数据的相同函数。

当用户使用the键浏览页面上的元素并访问此组件的子API时，onFocus将运行并从textarea加载数据。

但是，当用户单击组件的textarea子组件时，onClick和onFocus事件都会尝试从该应用程序接口加载数据。我想防止这两个事件触发一个函数两次。

如果可能的话，我不想把事件放在文本区本身。

  function DataRow(props) {

      function focused(e){
          props.loadDataFromAPI(); /* This will get ran twice if clicked on tr element's textarea */
      }

      return <tr onFocus={focused} onClick={focused} ><textarea></textarea></tr>;

  }

正如您所看到的，我希望在用户单击tr以及在文本区域上单击/焦点时调用它。我只是不想在点击文本区域时出现重复的调用！

Answer 1

也许你可以实现一个debounce系统来避免这种行为。通过这种方式，您不仅可以避免这种双重事件触发，而且可以防止用户在开始重复单击该按钮时向您发送垃圾邮件和轮询请求。

有很多关于去抖动的答案，也许你可以看看lodash去反跳，或者谷歌的特定反应系统，比如去反跳钩子。