如何完全禁用反应组件？

Question

我有一个反应组件，它有一些按钮和文本输入。我想完全禁用此组件中的所有内容，直到其他一些工作完成为止。如何禁用整个内部组件？

原文由 hearty 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以添加 disabled 并使用 CSS 禁用 div

 const MyComponent = ({disabled}) => {
    return (
        <div style={disabled ? {pointerEvents: "none", opacity: "0.4"} : {}}>
            <h1> Text</h1>
            <input type="text"/>
            <input type="password"/>
            <button>Login</button>
        </div>
    )
}

原文由 Karo Hovhannisyan 发布，翻译遵循 CC BY-SA 4.0 许可协议