Я ожидаю, что установка атрибута disabled в компоненте реагирования заблокирует обработчик onClick для этого элемента.

 <a role="button"
        className={`btn btn-block btn-info`}
        disabled={!this.state.readyToView}
        href={this.state.selectedObjectLink}
        onClick={this.handleLink}
        >View</a>

Но хотя элемент показывает атрибут «disabled», он все равно регистрирует событие щелчка.

Изменить: я должен уточнить - я обрабатываю событие click в handleLink, я хочу знать, почему атрибут disabled не удаляет обработчик? Извините за путаницу.

12
Liz 11 Янв 2017 в 10:47

4 ответа

Лучший ответ

Проблема не в disabled; это с элементом HTML a. Якорь <a> не может иметь отключенного свойства (что это вообще значит?). Просто потому, что вы передали CSS, чтобы элемент выглядел как кнопка, это не значит, что он является кнопкой. Это все еще якорь.

Решением будет либо использование чего-то другого (например, кнопки):

<button 
  role="button"
  className={`btn btn-block btn-info`}
  disabled={!this.state.readyToView}
  onClick={this.handleLink}
>
  View
</button>

Вы можете использовать this.state.selectedObjectLink внутри handleLink, если хотите перенаправить на страницу

Или воспользуйтесь одним из множества других предложений на этой странице.

10
Kousha 19 Сен 2019 в 16:36

Почему бы просто не обработать это в handleLink?

handleLink () {
  if (!this.state.readyToView) return
  // ...
}

Если вы действительно хотите динамически связать / удалить обработчик, вы можете сделать что-то вроде этого:

const clickHandler = this.state.readyToView ? this.handleLink : null
...
<a role="button"
  ...
  ...
  onClick={clickHandler}
>View</a>
9
CodinCat 11 Янв 2017 в 08:06

Вы можете добавить условие в свой обработчик кликов, что-то вроде этого

<a role="button"
        className={`btn btn-block btn-info`}
        disabled={!this.state.readyToView}
        onClick={this.state.readyToView && this.handleLink}
        >
        View
</a>

jsfiddle

5
QoP 11 Янв 2017 в 08:06

Если вы используете реакцию версии 16 или выше

На onClick не вызывайте метод напрямую, используйте метод () => вместо этого

const handleRemoveBtnClick = () => {
 ...
}

<button ...onClick={() => handleRemoveBtnClick} />
0
Aljohn Yamaro 24 Мар 2020 в 13:24