У меня есть форма с несколькими текстовыми полями. Если у вас есть определенная роль, вы должны иметь возможность щелкать поля и вводить текст, но если у вас нет роли администратора, все они должны быть отключены. Как мне отключить все текстовые поля в этой ситуации? Вот мой код. Я новичок, чтобы отреагировать, и любая помощь будет оценена по достоинству.

Я мог бы сделать что-то подобное, но есть ли более простой способ с меньшим количеством повторений, поскольку эта форма определенно должна стать больше и сложнее, и я должен иметь возможность отключить все это, если мне не дать правильную роль.

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="filled-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="filled-basic" label="Description"  disabled/>
      <TextField id="outlined-basic" label="Data" variant="outlined" disabled/>
    </form>
}
0
Steve 15 Сен 2021 в 21:41

2 ответа

Лучший ответ

Вместо того, чтобы дублировать ваши элементы и передавать 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" label="Title" disabled={!hasRole}/>
      <TextField id="filled-basic" label="Description" disabled={!hasRole}/>
      <TextField id="outlined-basic" label="Data" variant="outlined" disabled={!hasRole}/>
    </form>
  );
}
1
jnpdx 15 Сен 2021 в 18:45

Чуть проще ...

<form className={classes.root} noValidate autoComplete="off">
  <TextField id="standard-basic" label="Title" disabled={!hasRole}/>
  <TextField id="filled-basic" label="Description" disabled={!hasRole} />
  <TextField id="outlined-basic" label="Data" variant="outlined" disabled={!hasRole}/>
</form>
1
TR3 15 Сен 2021 в 18:44