create-react-app hook 父子组件传值

小鱼儿 2022-10-10 13:56 274阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

如图，需求是，用hook 实现点击  add+  按钮，就添加下面的子组件，点击删除的时候，就删除对应的子组件

思路：

1.父组件传值到子组件，直接父组件用 props 传参，子组件用 props 接受就可以了，我这里用的name，也可以换成 bannar

{
        list.map((good, index) =>
            <Item key={index} name={good.name} filterHandle={filterHandle} />
        )
    }

子组件

import React from 'react';
    
    // 这里要记得接收，要不不会显示
    function Item(props) {
        return (
            <div>
                <button onClick={deleteItem}>刪除</button>
                {/* 这里直接用props.属性名接受就可以了 */}
                <span>{props.name}</span>
            </div>
        )
    }
    export default Item;

2.子组件里删除数据

父组件

//这里就是删除的方法，子组件里面会调用的
        const deleteHandle = (val) => {
            let arr = list
            arr.splice(arr.findIndex(item => item.name === val), 1)
            setList(
                [...arr]
            );
        }

子组件

<button onClick={deleteItem}>刪除</button>
    <span>{props.name}</span>

//这个 deleteHandle 方法，和父组件里的 deleteHandle 方法是对应的
    const { deleteHandle } = props;
    const deleteItem = (event) => {
        deleteHandle(props.name)  
    }

才疏学浅，如有不足，欢迎指出 ，不胜感激 (•̀ᴗ•́)و ̑̑

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20221005/f730fa13d687414fbb95d3b312d9f04c.png