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((state)=>!状态);};返回(<div>{输入}<Button variant=“primary”onClick={toggleDisabled}>切换已禁用</按钮></div>);};
组件可以检测它是否被包装在<禁用/>
通过访问其上下文使用已禁用。上下文
.
功能CustomButton(道具){const isDisabled=useContext(Disabled.Context);返回(<按钮{…道具}style={{opacity:isDisabled?0.5:1}}/>);}
注意:此组件在不支持这个惰性的
HTML属性。我们建议添加官方WICG polyfill在项目中使用此组件时。
组件接受以下道具:
已禁用
是否禁用所有子代字段。默认为真的
.