@undfnd

Как организовать чекбоксы в react?

Данные (data) от апи вида (идут в компонент через пропсы):

{
  item1: {
    value1: bool,
    value2: bool
  },
  item2: {
    value1: bool,
    value2: bool
  }
}

Вывод (грубо говоря):

data.map(item => (
   <div>
      <Checkbox //для value1
         checked={item.value1}
         onChange={отправить запрос на сервер для изменения этого value и подождать ответа}
       />
      <Checkbox //для value2
         checked={item.value2}
         onChange={отправить запрос на сервер для изменения этого value и подождать ответа}
       />
      <Checkbox //для "выделить все" для каждого отдельного item
         checked={item.value1 && item.value2}
         onChange={отправить запрос на сервер для изменения всех value и подождать ответа}
       />
  </div>
 ))

Пока идет ответ - добавлять состояние типа "loading" каждому чекбоксу для отдельного item или всем, если изменен "выделить все".
Как лучше организовать работу с чекбоксами в этом случае? Где хранить временное "loading" значение для каждого? Например, дополнительные поля в исходные data добавлять? Или отдельный объект в стейте типа "checkboxes"?
  • Вопрос задан
  • 186 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Я бы попробовал добавить массив имён обрабатываемых элементов.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы