Всплывающая подсказка Reactstrap включает / отключает в зависимости от состояния кнопки - PullRequest
Новая
       9

Всплывающая подсказка Reactstrap включает / отключает в зависимости от состояния кнопки

0 голосов
/ 10 ноября 2018

Я использую Reactstrap (версия 6.5.0) для стилизации моего проекта ReactJs.

У меня есть встроенная форма с кнопкой отправки. Эта кнопка отключена до тех пор, пока пользователь не введет обязательные данные в форму.

Я пытаюсь добиться следующего:

  1. Пользователь должен показывать tooltip, когда он наводит курсор на отключенную кнопку (т. Е. Он не заполнил обязательные данные).
  2. Когда он заполняет обязательные данные, подсказка больше не должна отображаться на кнопке отправки.

Я использую компонент Reactstrap UncontrolledTooltip следующим образом 

    <button id="submitButton" type="submit" onClick={this.onSubmit} className="btn" disabled={this.state.submitButtonDisabled}>Submit</button>
    { this.state.submitButtonDisabled &&
                  <UncontrolledTooltip placement="bottom" target="submitButton">
                       Please fill in the mandatory details
                  </UncontrolledTooltip>
     }

Мой компонент имеет состояние this.state.submitButtonDisabled, которое я переключаю в зависимости от того, заполнены ли все обязательные поля.

Однако происходит то, что tooltip не отображается при наведении курсора на отключенную кнопку submit. Отображается только когда я несколько раз пытаюсь нажать отключенную кнопку submit. Кроме того, после заполнения обязательных данных и включения кнопки submit, tooltip продолжает отображаться даже при наведении курсора.

Отредактировано: я также заметил, что нажатие кнопки отправки также выдает предупреждение ниже в консоли 

     index.js:1452 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Как мне добиться ожидаемого поведения с помощью Reactstrap (я не хочу использовать jquery только для всплывающей подсказки) Любая помощь будет принята с благодарностью.

Спасибо.

1 Ответ

0 голосов
/ 13 декабря 2018

В вашем коде есть две проблемы,

1 

<button id="submitButton" type="submit" onClick={this.onSubmit} className="btn" disabled={this.state.submitButtonDisabled}>Submit</button>

В этой части вы ожидаете поведение при наведении, но у вас есть функция onClick = {this.submit}, которую необходимо обновить, чтобы включить наведение - используйте правильный eventlistner.

  1. ваш логический рендеринг должен быть или регистр, но вы используете и регистр, например:

{this.state.submitButtonDisabled &&} должен быть реализован как

{this.state.submitButtonDisabled? : "yes-your yes case code here": "no-no case case here"} в вашем случае ни один случай не является нулевым.

Надеюсь, что у вас будет достаточно советов для реализации вашего решения.

...