Checkbox не реагирует на клики, как мне правильно передать state и в чем я делаю ошибку
Как менять состояние? Ибо чекбоксы инпута не работает. В чем ошибка?
const result = [
{value: "Без пересадок", isChecked: false},
{value: "1 пересадка", isChecked: false},
{value: "2 пересадки", isChecked: false},
{value: "3 пересадки", isChecked: false}
]
const elem = result.slice()
const [transfers, setTransfers] = useState(result)
const handleAllChecked = (event) => {
transfers.forEach(transfer => {
const elem = result.slice()
transfer.isChecked = event.target.checked
setTransfers(elem)
})
}
const handleCheckElement = (event) => {
const elem = transfers.slice()
elem.forEach((transfer) => {
const res = transfer;
if (res.value === event.target.value) {
res.isChecked = event.target.checked
}
})
setTransfers(elem)
}
const checkbox = elem.map((transfer) => (
<li key={+new Date() + Math.random()}>
<input className={stl.checkbox} onChange={handleCheckElement} type="checkbox"
checked={transfer.isChecked} value={transfer.value}/> {transfer.value}
</li>
)
)
return (
<div className={stl['side-bar']}>
<h3 className={stl.title}> Количество пересадок </h3>
<ul className={stl['filter-list']}>
<li><input className={stl.checkbox} type="checkbox" onChange={handleAllChecked}
value="checkedAll"/> Все
</li>
{checkbox}
</ul>
</div>
);
Ответы (1 шт):
Автор решения: Александр
→ Ссылка
У вас определенно проблемы с handleAllChecked попробуйте это решение https://codesandbox.io/s/muddy-leftpad-9xysr?fontsize=14&hidenavigation=1&theme=dark