Индикатор загрузки при нажатии кнопки (reactjs и ant design)
Я сделал кнопку, которая при нажатии меняет свою метку с «извлечь» на «извлечено», после чего она становится отключенной. Что я хочу сделать сейчас, так это чтобы он имел индикатор загрузки при нажатии и останавливался, когда кнопка отключена.
Я старался
document.getElementById(inputID).setAttribute("загрузка", "истина");
когда кнопка нажата, но обнаружил, что она не работает на кнопках. Я также пытаюсь прямо сейчас использовать setState с моим
document.getElementById("btnTesting").innerHTML = "ИЗВЛЕЧЕНО";
class DashboardPage extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
}
onClickBtn = () => {
this.setState({ loading: true});
document.getElementById("btnTesting").innerHTML = "EXTRACTED";
document.getElementById("btnTesting").setAttribute("disabled","true");
}
render() {
return (
<Button id = "btnTesting" onClick = {this.onClickBtn} loading = {this.state.loading}>EXTRACT</Button>
)
}
}
Я ожидаю, что при нажатии будет индикатор загрузки, а затем остановится, когда кнопка отключена. Но экран становится пустым. Я смотрю в консоль и вижу эту ошибку
Uncaught DOMException: не удалось выполнить «insertBefore» на «узле»: узел, перед которым должен быть вставлен новый узел, не является дочерним элементом этого узла.
Вышеупомянутая ошибка произошла в компоненте: бла . бла .
Uncaught DOMException: не удалось выполнить «insertBefore» на «узле»: узел, перед которым должен быть вставлен новый узел, не является дочерним элементом этого узла.
Когда я использовал состояние, другие мои кнопки тоже меняются. Итак, я попытался использовать innerHTML
@ Алекс. Рид. Чтобы избежать этого, вам придется использовать отдельное значение состояния для всех кнопок.
Ответы 3
Поскольку вы используете React, вам не нужно использовать innerHTML или setAttribute для изменения текста кнопки или состояния отключения.
Вы можете использовать переменные состояния buttonText, инициализированные значением «Извлечь» и isDisabled, инициализированные значением false, и вы можете изменить состояние после выполнения кнопки.
class DashboardPage extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
buttonText: "EXTRACT",
isDisabled: false
};
}
onClickBtn = () => {
this.setState({ loading: true });
setTimeout(() => {
this.setState({
buttonText: "EXTRACTED",
isDisabled: true,
loading: false
});
}, 2000);
};
render() {
return (
<Button
id = "btnTesting"
onClick = {this.onClickBtn}
loading = {this.state.loading}
disabled = {this.state.isDisabled}
>
{this.state.buttonText}
</Button>
);
}
}
Я добавил setTimeout 2000 мс, чтобы вы могли видеть индикатор загрузки.
Найдите демо здесь: https://codesandbox.io/s/antd-reproduction-template-l1d4r
а если у меня несколько кнопок? Как я могу использовать свой идентификатор кнопки? На самом деле у нас есть динамический идентификатор от API. Итак, наш идентификатор выглядит примерно так: id = {extractButton-${value.sectionID}${value.specimenID}${value.requestID}}
Затем ваше состояние может иметь объекты для каждого идентификатора кнопки с текстом кнопки, состоянием загрузки и отключенным состоянием. Я обновил свой кодыпесочница с несколькими кнопками
да Именно то, что мне было нужно. Я также попробую использовать динамические имена объектов. Спасибо за это!
Можете ли вы проверить, решает ли приведенный ниже код вашу проблему? Я добавил таймер, чтобы продемонстрировать влияние времени, чтобы загрузка стала очевидной.
С ReactJS вам не нужно использовать setAttribute или innerHTML, поскольку ReactJS использует virtualDOM. Даже если вы их используете, это может привести к несогласованному состоянию DOM. В соответствии со стандартной практикой React вы должны обрабатывать свои требования (например, изменение DOM) с помощью переменных состояния.
class DashboardPage extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: {"btn1": false},
disabled: false,
buttonText: 'Extract'
}
onClickBtn = (btnStr) => {
let loadingCopy = Object.assign({},this.state.loading)
loadingCopy[btnStr] = true
this.setState({loading: loadingCopy})
setInterval(() => {
loadingCopy[btnStr] = false
this.setState({ loading: loadingCopy, buttonText: 'Extracted', disabled: true });
}, 3000);
}
render() {
return (
<ButtononClick = {() =>this.onClickBtn("btn1")} loading = {this.state.loading["btn1"]} disabled = {this.state.disabled}>{this.state.buttonText}</Button>
)
}
}
Кажется, я пробовал это за несколько недель до этого. Но что происходит, если у меня есть несколько кнопок, все они загружаются и меняют метку одновременно. Но это то, что мне было нужно. Я просто не знаю, что мне делать, если у меня есть несколько кнопок. PS: я новичок в Reactjs.
<Button id = "btn1" onClick = {this.onClickBtn} loading = {this.state.loading} disabled = {this.state.disabled}>{this.state.buttonText}</Button> <Button id = "btn2" onClick = {this.onClickBtn} loading = {this.state.loading} disabled = {this.state.disabled}>{this.state.buttonText}</Button>В этом случае каждая кнопка должна использовать разные переменные состояния для загрузки и текста кнопки. Это может привести к путанице, поэтому вы можете использовать массивы для представления каждого загружаемого текста.
не могли бы вы уточнить?
Я обновил свой ответ (проверьте, как сейчас обновляется загрузка состояния), чтобы дать вам представление. Вам нужно будет сделать то же самое и для других двух состояний.
import { Button } from 'antd';
import React from "react";
class SubmitButton extends React.Component {
state = {
loadings: [],
};
enterLoading = index => {
this.setState(({loadings}) => {
const newLoadings = [...loadings];
newLoadings[index] = true;
return {
loadings: newLoadings,
};
});
};
render() {
const {loadings} = this.state;
return (
<>
<Button type = "primary" htmlType = "submit" loading = {loadings[0]} onClick = {() => this.enterLoading(0)}>
Submit
</Button>
</>
);
}
Код: https://codesandbox.io/s/withered-framework-w5lmc?file=/src/App.js
Перво-наперво. Почему бы вам не обработать текст кнопки и атрибут disabled в состоянии?