Javascript 如何完全禁用react组件？

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

您只需在组件上添加一个

禁用的
道具，并将其传递到内部字段，如

<MyComponent disabled={shouldComponentBeDisabled} {...otherProps} />



以及在实施中

const MyComponent = ({disabled}) => {
    return <div>
          <button disabled={disabled}>someBtn</button>
          <input type="text" disabled={disabled}/>
    </div>
}

const MyComponent=（{disabled}）=>{
返回
某物
}
最好使用
表单
和
字段集
，并将所有输入/按钮元素放入其中。您可以通过将属性
disabled
设置为
fieldset
来禁用所有属性

有关更多详细信息，请参阅

工作示例：


类应用程序扩展了React.Component{
构造函数（）{
超级（）
this.state={disable:false}
}
toggleDisable=（）=>this.setState（prevState=>（{disable:！prevState.disable}））
按钮点击=（e）=>{
e、 预防默认值（）；
log（“单击按钮”）；
}
渲染（）{
返回(
切换禁用
按钮
)
}
}
ReactDOM.render（，document.getElementById（'app'））
.toggle{
边缘底部：20px；
}
您可以添加
禁用的
道具，并使用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>
    )
}

const MyComponent=（{disabled}）=>{
返回(
正文
登录
)
}
是否已禁用？为什么不隐藏？如果是这样的话，你为什么还要显示它？我想显示它..设计要求..但只是低透明度，但点击不应该对该div起作用那样太难了..我有很多按钮和输入..可以对在子对象中渲染的整个div执行此操作吗？不幸的是，使用React，以上是您能做的最好的事情，但是使用jquery也可以做同样的事情，但是不建议将jquery与react一起使用注意，即使在IE11中输入是灰色的，您仍然可以输入它们（bug）。谁会猜到答案是CSS？谢谢你，伙计！你一直在哪里。它运行得非常好。花几个小时来寻找完美的解决方案。非常感谢……您能通过键盘导航到输入字段并输入内容吗？