在 React 中禁用 DIV onClick 的最佳方法

Posted 2023-02-22

【中文标题】在 React 中禁用 DIV onClick 的最佳方法

【英文标题】：Best way to disabled DIV onClick in React

【发布时间】：2019-01-04 01:21:34

【问题描述】：

我有一个带有 div 的组件，它接受 onClick 和 aria-disabled 属性。它们都作为道具出现，禁用是可选的。在我的渲染方法中，我执行以下操作：

<div onClick=!this.props.Disabled ? this.props.Click : undefined 
     aria-disabled=this.props.Disabled>My Div</div>

我使用 CSS 来可视化禁用状态（不透明度：0.5，指针事件：无等）。但我想知道是否有更好的方法来处理实际的 onClick。由于它是一个强制属性......所以即使该项目被禁用，您仍然需要传入一个 onClick 来满足条件。有没有更好的方法来解决这个问题？

【问题讨论】：

您可以将Click 属性设为可选，并为其设置默认值() => 。

@ZeroDarkThirty 学到了新东西？？？？ div 不支持 disabled ????谢谢??????

【参考方案1】：

在CSS中为div[disabled]设置pointer-events: none，

test.scss

div[disabled]

  pointer-events: none;
  opacity: 0.7;

以上代码禁用了div的内容，可以通过添加disabled属性来禁用div。

Test.js

<div disabled=this.state.disabled>
  /* Contents */
</div>

点击按钮后，您可以将状态变量disabled更改为“true”。

handleClick = () =>
    this.setState(
      disabled: true,
    );
  

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

【讨论】：

你可能想把它写成 pointerEvents 或者它可能会抛出一个异常，因为 react dom div[disabled] pointerEvents: none; 的语法略有不同不透明度：0.7；

【参考方案2】：

我认为您的直觉是正确的——基于不断变化的道具添加和删除事件处理程序并不理想。如何简单地包装函数并根据需要返回？如下例：

<div onClick=(e) => !this.props.Disabled && this.props.Click(e)
  aria-disabled=this.props.Disabled>
    My Div
</div>

守卫运算符&& 是 if 逻辑的简写。

【参考方案3】：

为什么现在回答？ 与我一起工作的开发人员打算将这些答案用作参考。我相信更好的答案可以使他和其他人受益。

这个答案提供了什么？ 它两者提供了一个解决方案，该解决方案 (a) 语义准确，(b) 考虑可访问性，并且 (c) 使用现有答案； 并查看现有答案。

还有其他说明吗？ <div> 在“禁用”时应该如何表现不同？这是a "generic container"... 没有什么可以禁用的。我使用现有答案的行为：

防止鼠标与子元素交互 将<div> 标识为对某些软件“禁用”

建议的解决方案

注意：此解决方案使用Functional Components 语法。

div.is-disabled

  pointer-events: none;
  opacity: 0.7;

/**
 * Render a button and an element whose content it "disables"
 *
 * NOTE: The "disabling" prevents user interaction with its children and to reduce the opacity of the entire element.
 *
 * @prop Object props
 * @prop * props.children - Any React-parseable children as the content
 * @function
 */
function MyComponent( children ) 
  /** Whether content is disabled */
  let isDisabled = false;

  /**
   * When user clicks on element that should trigger "disabling" a div
   * @param UIEvent event
   * @function
   */
  const onClick (event) => 
    if (!isDisabled) 
      isDisabled = true;
    
  

  render (
    <>
      <div
        aria-disabled=isDisabled
        className=(isDisabled) ? 'is-disabled' : ''
      >
        children
      </div>
      <button onClick=onClick>
        Disable Content
      </button>
    </>
  );

审查现有答案

pramod-h-g's Answer

太好了。这暗示了“禁用<div>”的含义和解决方案。

但是，标记与我有关。

<div> 标签没有 disabled 属性 ^1 ^2。 在没有此类属性的元素上使用其他元素的标准属性可能会使新开发人员感到困惑。 自定义属性 (last I checked) 需要 data- 前缀。

jpsimon's Answer

准确回答问题——没有错误。

但是，我认为aria-disabled 属性只会“禁用”某些用户体验的 div。视觉浏览器用户不会将此<div> 视为“禁用”。

yts's Answer

我完全同意。

但是，这个解决方案不会“禁用”一个 div。原发帖人可能没有恰当地提问，我支持你把他引向<button>。

【参考方案4】：

button 可能更适合于此。使用button 元素，如果disabled 值为真，onClick 将不会自动触发。所以你可以这样做：

<button onClick=this.props.Click disabled=this.props.Disabled>My button</button>

您还可以获得在 div 上使用按钮的可访问性优势。

当按钮被禁用时，click prop 是“额外的”这一事实并没有错，我想说这比根据禁用状态更改传入的 props 的结构更好。

【讨论】：

@ZeroDarkThirty 这样做有什么原因吗？无论如何，按钮通常更适合可访问性目的，您似乎担心 aria

@yts 谢谢你，很有帮助的建议！