Реакция - кнопка не отключена во время вызова ajax, тост не работает

Question

У меня есть несколько кнопок на странице, и если я нажимаю кнопку, выполняется вызов ajax.Я хочу отключить кнопку, чтобы пользователь не нажимал ее снова и не выполнялся другой вызов ajax.

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

Есть ли другой способ показать всплывающее окно с воздушным шаром в реакции?

Пожалуйста, предложите,

    onClickRun(params) {

    const url = `/api/${params}/run`;
    const id = "run"+params;
    return $.ajax({
        type: 'POST',
        url,
        processData: false,
        contentType: 'application/json',
        beforeSend :() =>{
           // $("#run"+params).classList.add("cursorDisabled");
           // $("#run"+params).attr('disabled',true);   
            document.getElementById(id).disabled = true;
            document.getElementById(id).classList.add('cursorDisabled');             
        },
        success: (response) => { 
            if(!response.error) {

                // toast({
                //     message: 'Pipeline ran successfully.',
                //     flavor: 'success',
                //     options: { timeOut: 5000 }
                // });
                //$("#"+params).classList.remove("cursorDisabled");
                //$("#run"+params).attr('disabled',false);
                document.getElementById(id).disabled = false;
                  document.getElementById(id).classList.remove('cursorDisabled'); 
                location.reload(true);
            }
        },
        error: (error) => {
            console.log("error");
        }
    });
}

Код CSS:

.cursorDisabled{
    cursor: not-allowed;
    color: gray;
}

Кнопка:

<button id= {"run"+col.name} type="button" onClick={() =>  this.onClickRun(col.name)} <i className="icon-play-filled"></i>
                                </button>

Answer 1

Используйте только состояние реакции в вашем случае.Вот пример

const ajax = ({beforeSend, success}) => {
  beforeSend();
  setTimeout(success, 2000);
}

class Test extends Component {
  state = {
    isLoading: ''
  }
  handleClick = (params) => {
    ajax({
      beforeSend: () => {
        this.setState({isLoading: params})
      },
      success: () => {
        this.setState({isLoading: ''});
      }
    });
  }
  render() {
    const {isLoading} = this.state;
    return <div>
      <button disabled={isLoading === 'b1'} onClick={() => this.handleClick('b1')}>{isLoading === 'b1' ? '...loading' : 'b1'}</button>    
    <button disabled={isLoading === 'b2'} onClick={() => this.handleClick('b2')}>{isLoading === 'b2' ? '...loading' : 'b2'}</button>
    </div>
  }
}

пример для codepen

, но лучшим решением для архитектуры является создание отдельного компонента для каждой кнопки и установка isLoading как логического

Answer 2

Хм, так что это легко исправить, используя метод реакции setState.Вам необходимо внести следующие изменения

1. <button id= {"run"+col.name} type="button" onClick={() => this.onClickRun(col.name)} <i className="icon-play-filled"></i> заменить его на

<button id= {"run"+col.name} className={this.state.clickedButton === col.name ? 'cursorDisabled' : ''} disabled={this.state.clickedButton === col.name} type="button" onClick={() => this.onClickRun(col.name)} <i className="icon-play-filled"></i>;

2.

onClickRun(params) {

    const url = `/api/${params}/run`;
    const id = "run"+params;
    return $.ajax({
        type: 'POST',
        url,
        processData: false,
        contentType: 'application/json',
        beforeSend :() =>{
           // $("#run"+params).classList.add("cursorDisabled");
           // $("#run"+params).attr('disabled',true);   
            document.getElementById(id).disabled = true;
            document.getElementById(id).classList.add('cursorDisabled');
            this.setState({
              clickedButton: params
            })             
        },
        success: (response) => {
            this.setState({
              clickedButton: ''
            })
            if(!response.error) {

                // toast({
                //     message: 'Pipeline ran successfully.',
                //     flavor: 'success',
                //     options: { timeOut: 5000 }
                // });
                //$("#"+params).classList.remove("cursorDisabled");
                //$("#run"+params).attr('disabled',false);
                document.getElementById(id).disabled = false;
                  document.getElementById(id).classList.remove('cursorDisabled'); 
                location.reload(true);
            }
        },
        error: (error) => {
            console.log("error");
            this.setState({
              clickedButton: ''
            })
        }
    });
}

Добавить новое состояние, используя

state = {
  clickedButton: ''
}

Все готово.

Answer 3

Лучше всего использовать модальные и редукс-саги для побочных эффектов.

1) Когда вы нажимаете на кнопку, запускаете действие, которое перехватит саги redux-saga

2) redux-saga покажет Modal со значком загрузки и сделает вызов ajax и дождется возврата вызова ajax.

3) После возврата вызова скрыть модальные.

4) Модальные должны быть не кликабельными.Так что пользователь не может нигде щелкать, когда идет ваш вызов ajax

Answer 4

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

Если вы используете последнюю версию реакции, это можно сделать очень легко с помощью хуков.В противном случае, вызовите this.setState