javascript - 如何完全禁用 react 组件？

Question

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

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>
    )
}