Есть компонент формы. Имеет следующее состояние:
this.state = {
isLoading: false
}
Т.е. если форма ждет ответа от сервера, то состояние isLoading
меняется на true
.
Код формы (урезан):
<form>
<input type="text" />
<Button isLoading={this.state.isLoading} label="Одобрить" />
<Button isLoading={this.state.isLoading} label="Отклонить" />
</form>
Форма имеет две или более компонентов кнопок. При нажатии на какую-либо кнопку данные инпута отправляются на сервер и форма переходит в состояние загрузки (isLoading
меняется на true
).
Когда кнопке передан isLoading=true
, то текст кнопки меняется на Загрузка...
.
Проблема в том, что при isLoading=true
СРАЗУ У ВСЕХ кнопок меняется текст (что, собственно, абсолютно нормально), а должно только у той, которую нажали.
Вопрос: как просто и изящно сделать так, чтобы текст менялся только у той кнопки, которую нажали, при условии, что кнопок может быть много и они не должны создаваться в цикле?
Залил все на пен для экспериментов CodePen
state.isLoading
.Загрузка
и когда возвращать назад, если запрос на сервер идёт в компонентеForm