我有一個表格，里面有幾個文本欄位。如果你有一個特定的角色，那么你應該能夠點擊這些欄位并輸入，但如果你沒有管理員角色，那么它們應該全部被禁用。在這種情況下，我如何禁用所有的文本欄位？這是我的代碼。我對反應器相當陌生，希望得到任何幫助。
我可以這樣做，但是否有更簡單的方法來減少重復，因為這個表單肯定會越來越大，越來越復雜，如果不給正確的角色，我應該能夠禁用整個東西。
export default function BasicTextFields（）{
const classes = useStyles() 。
const hasRole = authService.verifyRole(role.admin)
return (
{hasRole ?
<form className={classes。 root} noValidate autoComplete="off">
< TextField id="standard-basic" label="Title" />
< TextField id="fill-basic" label="Description"/>
< TextField id=" outlined-basic" label="Data" variant=" outlined" />
</form>
);
) : (
<form className={classes. root} noValidate autoComplete="off">
< TextField id="standard- basic" label="Title" disabled/>
< TextField id="fill- basic" label="說明" disabled/>
< TextField id="exported-basic" label="Data" label="Data" variant="exported" disabled/>
</form>
uj5u.com熱心網友回復：
與其重復你的元素并將disabled作為一個單一的關鍵字（這是disabled={true}的縮寫，你可以明確地將一個布林值傳遞給它：
export default function BasicTextFields（）{
const classes = useStyles() 。
const hasRole = authService.verifyRole(role.admin)
return (
<form className={classes. root} noValidate autoComplete=off">
< TextField id="standard-basic"/span> label="Title" disabled={! hasRole}/>/span>
< TextField id="fill-basic" label="描述" disabled={! hasRole}/>/span>
< TextField id=" outlined-basic" label="Data" variant=" outlined" disabled={! hasRole}/>/span>
</form>/span>
);
}
uj5u.com熱心網友回復：
稍微簡單一點...
<form className={classes.root} noValidate autoComplete="off"/span>>
< TextField id="standard-basic" label="Title" disabled={! hasRole}/>>
< TextField id="fill-basic" label="描述" disabled={! hasRole} />
< TextField id=" outlined-basic" label="Data" variant=" outlined" disabled={! hasRole}/>>
</form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/309143.html
標籤：