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

小鱼儿 2022-10-10 13:56 259阅读 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.子组件里删除数据

父组件

<Item index={index} name={item.name} deleteHandle={deleteHandle}/>

//这里就是删除的方法，子组件里面会调用的
        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

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 父子组件传值

父组件通过属性传值 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

蔚落/ 2023年07月10日 15:58/ 0 赞/ 22 阅读

相关 vue 父子组件传值

父子组件传值最常用的方法（4种） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

比眉伴天荒/ 2023年01月16日 02:43/ 0 赞/ 319 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 313 阅读

相关 React父子组件传值

文章目录写在前面示例图1 示例图2 功能描述

港控/mmm°/ 2022年11月17日 03:50/ 0 赞/ 222 阅读

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

小鱼儿/ 2022年10月10日 13:56/ 0 赞/ 260 阅读

相关 vue父子组件传值

作者：小小字符链接：https://www.jianshu.com/p/4f2c0acedb04 來源：简书 1.前言组件是Vue.js最推

悠悠/ 2022年05月27日 10:50/ 0 赞/ 310 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 383 阅读

相关 React父子组件传值

React父子组件传值父组件给子组件传值子组件给父组件传值父组件给子组件传值 > 思路：把需要传递的值获取，并放入state中，并

我不是女神ヾ/ 2021年09月24日 08:20/ 0 赞/ 399 阅读

相关 vue父子组件传值

父组件 <template> <div> <h1>我是父组件</h1> <hello :msg="ad

小咪咪/ 2021年09月17日 02:04/ 0 赞/ 535 阅读

相关 uniapp父子组件传值

父组件页面（parent.vue） <template> <view> <Child @out=out :backGround=backGr

灰太狼/ 2021年09月13日 15:54/ 0 赞/ 563 阅读