При привязке `это` к событию onClick в компоненте React параметр "это" неявно содержит ошибку "любого" типа

Question 1

P.S. Я пробовал другой ответ из StackOverflow, но почему-то это не сработало.

Я связываю this в обработчик функции onClick, как указано ниже

  const handleUpdatePermissionClick = async (user: UserPermission) => {
    try {
      await updateUserPermission(user)
      setShowError(false)
    } catch (e) {
      setShowError(true)
    }
  }

  <MenuItem
    name={ele.name}
    Key={ele.name}
    onClick={handleUpdatePermissionClick.bind(this, { permission: ele, userId })}
  />

Но это дает мне Parameter 'this' implicitly has an 'any' type ошибка`.

Я попытался назначить несколько типов, а именно. любой, пустой,тип для this как

onClick={handleUpdatePermissionClick.bind(this:any, { permission: ele, userId })}

Но это дает ошибку типа "Не требуется". Пожалуйста, помогите мне решить эту проблему.

Question 2

Следующее изменение-это то, что сработало для меня. Вместо привязки я просто прошел обычное событие.

При вызове функции обработчика onClick используется React.MouseEvent<HTMLElement> как тип события

И в определении функции используется "_e" для подавления param defined but not used ошибка. Добавляю его сюда, чтобы он мог кому-то помочь в будущем.

const handleUpdatePermissionClick = async (_e:React.MouseEvent<HTMLElement>,user: UserPermission) => {
   try {
      await updateUserPermission(user)
      setShowError(false)
   } catch (e) {
      setShowError(true)
   }
}

 <MenuItem
   name={ele.name}
   key={ele.name}
   onClick={(e: React.MouseEvent<HTMLElement>) => {
     handleUpdatePermissionClick(e, { permission: ele, userId })
   }}
 />

Question 3

Это может быть связано с контекстом. в режиме рендеринга перед возвратом просто выполните следующие действия; пусть это = это; и вызовите функцию, используя это вместо этого. Это сработало для меня.

Vipul Patil · Answer 1 · 2021-11-23T17:48:19

Следующее изменение-это то, что сработало для меня. Вместо привязки я просто прошел обычное событие.

При вызове функции обработчика onClick используется React.MouseEvent<HTMLElement> как тип события

И в определении функции используется "_e" для подавления param defined but not used ошибка. Добавляю его сюда, чтобы он мог кому-то помочь в будущем.

const handleUpdatePermissionClick = async (_e:React.MouseEvent<HTMLElement>,user: UserPermission) => {
   try {
      await updateUserPermission(user)
      setShowError(false)
   } catch (e) {
      setShowError(true)
   }
}

 <MenuItem
   name={ele.name}
   key={ele.name}
   onClick={(e: React.MouseEvent<HTMLElement>) => {
     handleUpdatePermissionClick(e, { permission: ele, userId })
   }}
 />

Nazneen · Answer 2 · 2021-11-25T12:07:12

Это может быть связано с контекстом. в режиме рендеринга перед возвратом просто выполните следующие действия; пусть это = это; и вызовите функцию, используя это вместо этого. Это сработало для меня.

При привязке `это` к событию onClick в компоненте React параметр "это" неявно содержит ошибку "любого" типа

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории