Как я могу решить проблему замены текста кнопки загрузкой счетчика после нажатия?

Question

У меня есть список пользователей в таблице, и для каждого пользователя у меня есть несколько кнопок действий, таких как просмотр, редактирование. Когда я нажимаю кнопку просмотра, на сервер отправляется запрос на получение сведений о пользователе. Поэтому я хочу добавить спиннер вместо текста внутри кнопки. Я использую загрузчик спиннер внутри кнопки. Но мой код добавляет счетчик всем пользователям в таблице. То есть все кнопки просмотра вращаются одновременно при нажатии кнопки просмотра.

Я использую состояние для поддержания счетчика. Если данные выбираются, состояние viewInProgress имеет ложное значение. Состояние передается как реквизит компоненту таблицы. Я использую это для всех кнопок.

    const rows = teacherList.map((teacher, i) => ({
      teacherName: teacher.get('fullName'),
      email: teacher.get('email'),
      action: (
        <span key={i}>
          {this.props.viewInProgress ? (
            <button className="btn btn-primary btn-sm" type="button" disabled>
              <span
                className="spinner-border spinner-border-sm"
                role="status"
                aria-hidden="true"
              ></span>
              Loading...
            </button>
          ) : (
            <button
              className="btn btn-sm btn-primary"
              onClick={() => onViewClick(teacher.get('id'))}
            >
              View
            </button>
          )}

          {type === TableType.PENDING && (
            <span>
              <button
                className="btn btn-sm btn-success"
                onClick={() => this.onAllocateClick(teacher.get('id'))}
              >
                Allocate subject
              </button>
            </span>
          )}
          {type === TableType.APPROVED && (
            <span>
              <button
                className="btn btn-sm btn-danger"
                onClick={() => this.onRemove(teacher.get('id'))}
              >
                Remove
              </button>
              {this.state.editInProgress ? (
                <button className="btn btn-dark btn-sm" type="button" disabled>
                  <span
                    className="spinner-border spinner-border-sm"
                    role="status"
                    aria-hidden="true"
                  ></span>
                  Loading...
                </button>
              ) : (
                <button
                  className="btn btn-sm btn-dark"
                  onClick={() => this.onEditClick(teacher.get('id'))}
                >
                  Edit
                </button>
              )}
            </span>
          )}
        </span>
      ),
    }));

Если я нажму на кнопку просмотра, эту конкретную кнопку следует заменить на спиннер. Но в моем случае все кнопки просмотра заменяются кнопкой вращения. Как я могу решить проблему?

Answer 1

вы можете создать компоненты Button, которые имеют подпорку загрузки;когда для параметра prop установлено значение true, вместо текста нужно показывать прядильщик кнопки

export default ({title, loading}) => {
   return (
      <button className={loading ? 'someClass': 'someDisabledClass'}> 
        {loading ? <Spinner/> : title}
      </button>
   );
}

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

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

Answer 2

отметьте это

const rows = teacherList.map((teacher, i) => ({
  teacherName: teacher.get('fullName'),
  email: teacher.get('email'),
  action: (
    <span key={i}>
      <button
        className="btn btn-primary btn-sm"
        type="button"
        onClick={() => onViewClick(teacher.get('id'))}
        disabled={this.props.viewInProgress}
      >
        {this.props.viewInProgress ?
          <>
            <span
              className="spinner-border spinner-border-sm"
              role="status"
              aria-hidden="true"
            ></span>
            Loading...
             </> : "View"}
      </button>

      {type === TableType.PENDING && (
        <span>
          <button
            className="btn btn-sm btn-success"
            onClick={() => this.onAllocateClick(teacher.get('id'))}
          >
            Allocate subject
          </button>
        </span>
      )}
      {type === TableType.APPROVED && (
        <span>
          <button
            className="btn btn-sm btn-danger"
            onClick={() => this.onRemove(teacher.get('id'))}
          >
            Remove
          </button>
          <button
            className="btn btn-dark btn-sm"
            type="button"
            disabled={this.state.editInProgress}
            onClick={() => this.onEditClick(teacher.get('id'))}
          >
            {this.state.editInProgress ? <>
              <span
                className="spinner-border spinner-border-sm"
                role="status"
                aria-hidden="true"
              ></span>
              Loading...</> : "Edit"}

          </button>
        </span>
      )}
    </span>
  ),
}));

или вы можете создать новый компонент, подобный этому:

/**
 * 
 * @param {string} props.className  
 * @param {function} props.onClick
 * @param {boolian} props.loading
 * @param {string} props.value
 *  
 */
const customButton = props => (
  <button
    className={props.className ? props.className : ""}
    type="button"
    onClick={() => props.onClick ? props.onClick : null}
    disabled={props.loading}
  >
    {props.loading ?
      <>
        <span
          className="spinner-border spinner-border-sm"
          role="status"
          aria-hidden="true"
        ></span>
        Loading...
         </> : props.value}
  </button>;
);