React.js. Как сделать так, чтобы по нажатию на checkbox, checkbox всех дочерних элементов изменялся?

Question

// index.js

import Head from 'next/head'

import Main from '../components/Main'

import styles from '../styles/Home.module.css'

const Home = () => {
    const data = [
        {
            index: 0,
            title: 'Europe',
            body: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
            checked: false,
            list: [
                {
                    index: 0,
                    title: 'German Empire',
                    body: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
                    checked: false,
                    list: [
                        {
                            index: 0,
                            title: 'Prussia',
                            body: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
                            checked: false,
                            list: []
                        }
                    ]
                },
                {
                    index: 1,
                    title: 'Russian Empire',
                    body: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
                    checked: false,
                    list: [
                        {
                            index: 0,
                            title: 'Finland',
                            body: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
                            checked: false,
                            list: []
                        }
                    ]
                }
            ]
        },
        {
            index: 1,
            title: 'Asia',
            body: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
            checked: false,
            list: [
                {
                    index: 0,
                    title: 'Qing dynasty',
                    body: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
                    checked: false,
                    list: []
                },
                {
                    index: 1,
                    title: 'Empire of Japan',
                    body: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
                    checked: false,
                    list: []
                }
            ]
        }
    ]

    return (
        <div className={styles.container}>
            <Head>
                <title>XIX</title>
                <meta name="description" content="It's multilevel list." />
            </Head>
            <Main data={data} />
        </div>
    )
}

export default Home

// Main.jsx

import React from 'react'

import List from './List'

import styles from '../styles/Main.module.css'

const Main = ({ data }) => {
    return (
        <main className={styles.main}>
            <h1 className={styles.heading}>the world in the XIX century</h1>
            <List items={data} checked={false} />
        </main>
    )
}

export default Main

// List.jsx

import React, { useState } from 'react'

import Item from './Item'

import styles from '../styles/List.module.css'

const List = ({ items, checked }) => {
    return (
        <ul className={styles.list}>
            {
                items.map((item, index) =>
                    <Item key={item.index}
                          index={index + 1}
                          title={item.title}
                          body={item.body}
                          list={item.list}
                          checked={checked}
                    />
                )
            }
        </ul>
    )
}

export default List

// Item.jsx

import React, { useState } from 'react'

import List from './List'
import Checkbox from './Checkbox'
import Button from './Button'

import Image from 'next/image'

import styles from '../styles/Item.module.css'

const Item = ({ index, title, body, list, checked }) => {
    const [visible, setVisible] = useState(false)
    const [status, setStatus] = useState(checked)

    return (
        <li className={styles.item}>
            <div className="">
                <div className={styles.content}>
                    <h2 className={styles.heading}>{index}. {title}</h2>
                    <p>{body}</p>
                </div>
                <div className={styles.options}>
                    <Checkbox
                        checked={status}
                        changeAction={(event) => {
                            setStatus(event.target.checked)
                            console.log(event.target.checked)
                        }}
                    />
                    <Button
                        clickAction={(event) => {
                            visible === true
                                ? setVisible(false)
                                : setVisible(true)
                            event.target.childNodes[0].nodeName === '#text'
                                ? event.target.classList.toggle(styles.position)
                                : event.target.childNodes[0].classList.toggle(styles.position)
                        }}
                        content="⯆"
                    />
                </div>
            </div>
            {
                visible ? <List items={list} checked={status} /> : false
            }
        </li>
    )
}

export default Item

// Checkbox

import React, { useState } from 'react'

import styles from '../styles/Checkbox.module.css'

const Checkbox = ({ checked, changeAction }) => {
    return (
        <label className={styles.label}>
            <input checked={checked} onChange={changeAction} className={styles.checkbox} type="checkbox" name="checkbox" />
        </label>
    )
}

export default Checkbox

БЛОГ НА HUSL

React.js. Как сделать так, чтобы по нажатию на checkbox, checkbox всех дочерних элементов изменялся?

Ответы (0 шт):