残疾人

Disabled是一个禁用子代tabable元素并阻止指针交互的组件。

用法

假设您有一个表单组件，您可以通过使用包装表单来禁用所有表单输入<禁用>.

从'react'导入{useState}；从“@wordpress/components”导入{Button，Disabled，TextControl}；const MyDisabled=（）=>{const[isDisabled，setIsDisabled]=useState（true）；let input=<TextControl label=“input”onChange={（）=>{}}/>；if（isDisabled）{input=<Disabled>{input}</Disabled>；}const切换禁用=（）=>{setIsDisabled（（状态）=>！状态）；};返回(<div>{输入}<Button variant=“primary”onClick={toggleDisabled}>禁用切换</按钮></div>);};

组件可以检测它是否被包装在<禁用/>通过访问其上下文使用已禁用。上下文.

功能CustomButton（道具）{const isDisabled=useContext（Disabled.Context）；返回(<按钮{…道具}style={{opacity:isDisabled？0.5:1}}/>);}

注意：此组件在不支持这个惰性的HTML属性。我们建议添加官方WICG polyfill在项目中使用此组件时。

道具

组件接受以下道具：

已禁用

是否禁用所有子字段。默认为真的.

• 类型：布尔值
• 必需：否
• 违约：真的