React-使用父子组件传值完成TodoList功能

最新推荐文章于 2024-09-30 18:55:14 发布

我谈山美，我说你媚

最新推荐文章于 2024-09-30 18:55:14 发布

阅读量92

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/m0_69853343/article/details/131722686

版权

文章介绍了在React中如何实现父组件向子组件传递值，包括通过props传递数据以及子组件如何接收这些值。同时，文章详细讲解了由于React的单向数据流原则，子组件如何调用父组件的方法来删除父组件的数据，通过示例代码展示了添加、删除任务的实现过程。

摘要由CSDN通过智能技术生成

在简单版基础之上的本质核心知识点

一、父组件给子组件传值

1.父组件传值：在父组件里的子组件标签里自定义绑定一个属性

如 <ChildComponent message={list} del={del}></ChildComponent>

2.值组件接受值：const ChildComponent = (props) => { const { del } = props; console.log(props.message) }

二、子组件里点删除按钮，删除父组件的值

1.因为react是单选数据流，不能在子组件里直接删除父组件里的值，只能在父组件里定义一个删除父组件值的方法，然后把这个方法传给子组件，子组件const { del } = props 解构方法，然后再调用del方法

父组件代码：

import React, { useState } from "react";
import ChildComponent from "./Child"; // 导入Child组件
import TodoList from "./Tolist"; // 导入Tolist组件

const Father = () => {
  const [inputValue, setinputvalue] = useState(""); // 输入框的值
  const [list, setlist] = useState([]); // 任务列表数组

  // 处理输入框值的变化
  const handle = (e) => {
    setinputvalue(e.target.value);
  };

  // 添加任务到列表中
  const add = () => {
    const newList = [...list, inputValue]; // 将输入框的值添加到新的数组中
    setlist(newList); // 更新任务列表数组
  };

  // 删除特定位置上的任务
  const del = (index) => {
    const newList = [...list]; // 创建一个新的数组，复制任务列表数组
    newList.splice(index, 1); // 在新数组中删除指定索引位置的任务
    setlist(newList); // 更新任务列表数组
  };

  return (
    <div>
      <input value={inputValue} onChange={handle}></input> {/* 输入框 */}
      <button onClick={add}>新增</button> {/* 添加按钮 */}
      <ChildComponent message={list} del={del}></ChildComponent> {/* 渲染Child组件，并传递任务列表和删除函数作为props */}
      <TodoList></TodoList> {/* 渲染TodoList组件 */}
    </div>
  );
};

export default Father;

子组件代码：

import React, { useState, useEffect } from "react";

const ChildComponent = (props) => {
  const [list, setList] = useState([]); // 任务列表数组
  const { del } = props; // 从props中获取删除函数

  // 当props中的message值改变时，更新任务列表数组
  useEffect(() => {
    setList(props.message); // 更新任务列表数组
  }, [props.message]);

  return (
    <div>
      <ul>
        {/* 遍历任务列表数组，渲染每个任务和删除按钮 */}
        {list.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => del(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ChildComponent;