Как отправить данные флажка в reactjs
Не знаю, как толком объяснить, но попробую. У меня есть несколько флажков, которые показывают, в какой день недели будет открыт магазин. Итак, у меня есть данные api
, где day_of_week указывает, в какой день следует установить флажок. Бывший. глянь сюда
Мне нужно отправить правильный атрибут на сервер, то есть 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 и можно было бы установить любые флажки.
Спасибо)
@ warl0ck, не могли бы вы показать, как правильно писать onChange?)
Ответы 1
Вам нужно будет проверить значение checked цели события в обратном вызове onChange.
в вашем коде:
<Checkbox
checked = {open_hour.day_of_week === inx}
onChange = {(e) => this.setState({checked: e.target.checked})}
/>
Отметьте это демонстрация jsfiddle
для флажка вы получаете событие, из которого вы можете проверить
e.target.checked, чтобы узнать, был ли флажок установлен или снят