Как сделать эту задачу с деревом?

Question

[webe]

Есть массив объектов

let tree = [{id:1,parent_id:0,name:"Росссия"},{id:2,parent_id:0,name:"Украина"},{id:3,parent_id:1,name:"Москва"},{id:4,parent_id:3,name:"Улица пушкина"}]

Как выбирать чекбоксы я примерно знаю, у каждого элемента будет свой state и мы можем просто менять состояние checked unchecked

Но как сделать так, что бы родительские чекбоксы зависили от дочерних?
Как на скрине ниже.
Как я понял мы уже должны работать не с state конкретной ноды, а выводить всю json структуру дерева в корневой компонент?

Можете примерно описать алгоритм что делать когда я кликнул по самому нижнему элементу, тогда он должен выделится, но и все родительские тоже должны поменять свой статус.

Comments

[Роман Александрович]

jsfiddle.net/0s0p3716/188
вам должно это помоч

Answer 1

[Dmitry Alekseev]

Я не против написания собственных велосипедов, это полезно для понимания принципов работы тех или иных решений, но все же посоветую ant.design и ее компонент tree, который отлично подходит для реализации подобных задач.