react父子组件之间传值

**

子组件

**

import {  Drawer } from 'antd';
import React, { useState } from 'react';
interface Props {
    isOpen: boolean; // 这里定义了一个名为isOpen的prop类型为boolean
}
interface Props {
    onValueChange(value: boolean): void; // 定义一个回调函数类型的prop
}
const Detail = (props:Props) => {
   // console.log(props)
   //  props 父组件传过来的值
 const [open, setOpen] = useState(props.isOpen);

 const onClose = () => {
  setOpen(false);
  // 子组件给父组件传值
  props.onValueChange(false); // 当点击按钮时触发回调函数，并传递值false
 };

 return (
     <>
      <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
       <p>Some contents...</p>
       <p>Some contents...</p>
       <p>Some contents...</p>
      </Drawer>
     </>
 );
};

export default Detail

**

父组件

**

import { Table,Button,Tag,Space } from 'antd';
import { useDispatch, useSelector} from "react-redux"
import {textInp} from "./assets/action";
import {incCount} from "../About/assets/action";
import type { ColumnsType } from 'antd/es/table';
import Detail from "./biz/detail";
import {useState} from "react";
interface DataType {
 key: string;
 name: string;
 age: number;
 address: string;
 tags: string[];
}

const columns: ColumnsType<DataType> = [
 {
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
  align:'center',
  render: text => <a>{text}</a>,
 },
 {
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
  align:'center',
 },
 {
  title: '地址',
  dataIndex: 'address',
  key: 'address',
  align:'center',
 },
 {
  title: '标签',
  key: 'tags',
  dataIndex: 'tags',
  align:'center',
  render: (_, { tags }) => (
      <>
       {tags.map(tag => {
        let color = tag.length > 5 ? 'geekblue' : 'green';
        if (tag === 'loser') {
         color = 'volcano';
        }
        return (
            <Tag color={color} key={tag}>
             {tag.toUpperCase()}
            </Tag>
        );
       })}
      </>
  ),
 },
 {
  title: '操作',
  key: 'action',
  align:'center',
  render: (_, record) => (
      <Space size="middle">
       <Button type="link" onClick={()=>{
        handleEdit(record,1)
       }}>编辑</Button>
       <Button type="link" onClick={()=>{
        handleEdit(record,2)
       }}>删除</Button>
      </Space>
  ),
 },
];
// 编辑按钮
const handleEdit=(record:DataType,index:number)=>{
 console.log(index)
 console.log(record)
}

  const data: DataType[] = [
   {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
   },
   {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
   },
   {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
   },
  ];

const Home = () => {
 const { count } = useSelector((state: any) => state.aboutReducers.countReducer)

 const { text } = useSelector((state: any) => state.allReducer.textReducer)

 const dispatch = useDispatch()
 const [isModalOpen, setIsModalOpen] = useState(false);

 // 父组件给子组件传isOpen这一属性
 const handleClick=(type:string)=>{
  dispatch(incCount("增加"))
  dispatch(textInp('更改值'))
  setIsModalOpen(true)
 }
 // 子组件给父组件传值
 const handleReceiveValue = (value: boolean) => {
  setIsModalOpen(false); // 更新状态变量
 };
 return(
     <div>
    <p> count值: {count}</p>
     <p>text值：{text}</p>
      { isModalOpen&&<Detail isOpen={isModalOpen} onValueChange={handleReceiveValue}></Detail>}
      <Button type="primary" onClick={()=>{
        handleClick('add')
      }}>新增</Button>
      <Table dataSource={data} columns={columns} />
     </div>
 )
}
export default Home