как отправить данные чекбокса вactjs

Question

Я не знаю, как правильно объяснить, но я постараюсь.У меня есть несколько флажков, которые показывают, в какой день недели магазин будет открыт.Итак, у меня есть эти данные api

, где day_of_week указывает, в какой день флажок должен быть установлен.Ex.см. здесь

Мне нужно отправить правильный атрибут на сервер, которым является day_of_week, чтобы изменить статус флажка.Однако теперь можно установить только один из флажков.Это мой код

  {businessGroup.opening_hours ? businessGroup.opening_hours.map((open_hour, i) => (
              <div key={i} className="openHours d-flex">

                <DatePicker
                  placeholder="Start Date"
                />
                <DatePicker
                  placeholder="End Date"
                />

                <div className="weekDays">
                  {
                    ['Mo1', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((day, inx) => (
                      <div className="weekChekbox" key={inx}>
                        <div>{day}</div>
                        <Checkbox
                          checked={open_hour.day_of_week === inx}
                          onChange={() => this.setState({
                            businessGroup: {
                              ...businessGroup,
                              opening_hours: [
                                ...businessGroup.opening_hours.splice(0, i),
                                {
                                  ...businessGroup.opening_hours[0],
                                day_of_week: inx,
                                },
                                ...businessGroup.opening_hours.splice(1),
                              ],
                            },
                          })}
                        />
                      </div>
                    ))

                  }
                </div>
})

Не обращайте особого внимания на закрывающую скобку, это не важно сейчас, потому что я просто вырезал кусок кода из всего кода.Итак, как я должен сделать мой onChange правильно, чтобы правильно отправлять day_of_week и любые флажки могут быть проверены.

Спасибо)

Answer 1

Вам нужно будет проверить значение checked цели события в обратном вызове onChange.

в вашем коде:

<Checkbox
  checked={open_hour.day_of_week === inx}
  onChange={(e) => this.setState({checked: e.target.checked})}
/>

Проверьте это jsfiddle demo