我有一个组件，其中一个 div 接受 onClick 和 aria-disabled 属性。它们都作为 props 传递进来，disabled 是可选的。在我的 render 方法中，我执行以下操作：
<div onClick={!this.props.Disabled ? this.props.Click : undefined}
aria-disabled={this.props.Disabled>My Div</div>
我使用CSS来显示禁用状态（opacity: 0.5，pointer-event:none等等）。但是我想知道是否有更好的处理实际onClick事件的方法。因为它是强制性的属性……所以即使项目被禁用，您仍然需要传递一个onClick来满足条件。有没有更好的解决方法？
在CSS中为div[disabled]设置pointer-events: none，
test.scss
div[disabled]
{
pointer-events: none;
opacity: 0.7;
}
以上代码将使div的内容被禁用，您可以通过添加“disabled”属性来使
Test.js
<div disabled={this.state.disabled}>
/* Contents */
</div>
点击按钮后，您可以将状态变量disabled更改为'true'。
handleClick = () =>{
this.setState({
disabled: true,
});
}
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
为什么现在回答？ 我与一位合作的开发人员打算将这些答案用作参考，我认为更好的答案可以使他和其他人受益。
这个答案提供什么？ 它提供了一个解决方案，既考虑了语义的准确性，又考虑了可访问性，并使用了现有的答案，同时还审查了现有的答案。
是否有其他注意事项？
当“禁用”时，<div>应该如何表现不同？它是“通用容器”……没有可禁用的内容。我使用了现有答案的行为：
<div>为“已禁用”注意：此解决方案使用函数组件语法。
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>
</>
);
}
很好。这提供了“禁用
<div onClick={(e) => !this.props.Disabled && this.props.Click(e)}
aria-disabled={this.props.Disabled}>
My Div
</div>
&&是一种缩写的if逻辑语法，用于守卫操作。
button 可能更适合这个场景。使用 button 元素，如果 disabled 属性为 true，则 onClick 事件将自动不会触发。因此你可以这样做：<button onClick={this.props.Click} disabled={this.props.Disabled}>My button</button>
使用按钮而不是 div，您还可以获得可访问性的好处。
当按钮被禁用时，click 属性是“额外”的事实并没有什么问题，我认为这比根据禁用状态更改传入属性的结构要好。
Click属性设为可选，并将其默认值设置为() => {}。 - Thollediv不支持disabled。谢谢！ - dance2die