Question

我有一个带有div的组件，该组件接受onClick和禁用aria的属性。他们两个都是道具，残疾人是可选的。在我的渲染方法中，请执行以下操作：

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

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

Answer 1

test.scss

state

上面的代码使div的内容禁用。您可以通过添加禁用属性来使div禁用。 Test.js

div[disabled]
{
  pointer-events: none;
  opacity: 0.7;
}

单击按钮后，您可以将禁用的状态变量更改为“ true”。

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

Answer 2

我认为您的直觉是正确的-不理想的是始终根据更改道具来添加和删除事件处理程序。简单包装函数并根据需要返回怎么样？例如

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

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

Answer 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>。

Answer 4

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

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

使用div上的按钮，您还将获得辅助功能。

禁用按钮时，点击道具为“多余”这一事实没有什么错，我想这比基于禁用状态更改传入的道具的结构更好。

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

4 个答案:

建议的解决方案

审查现有答案

pramod-h-g's Answer

jpsimon's Answer

yts's Answer