如何将 prop 从子组件传递到父组件？

Question

我有一个 updateServerStatusModal 组件，正在servers.js 组件中使用。我正在尝试将 prop 从 updateServerStatusModal 组件传递到服务器组件，但经过几次不同的试验后它似乎无法正常工作。

updateServerStatusModal 组件

...other imports
import Select from './Select'

const UpdateServerStatusModal = ({
    open,
    setOpen,
    title = '',
    confirmBtnTitle = 'Delete',
    variant = 'alert',
    onConfirm,
    icon = 'exclamation',
    onStatusChange,
}) => {

    const handleConfirm = async event => {
        await onConfirm(selectedStatus)
    }

    const statusList = [
        { id: 1, label: 'active' },
        { id: 2, label: 'full' },
        { id: 3, label: 'inactive' },
    ]
    const [selectedStatus, setSelectedStatus] = useState(statusList[0].label)

    return (
        <Modal open={!!open} setOpen={setOpen} width={464}>
            <Modal.Title>
                {icons[icon]}
                <span>{title}</span>
            </Modal.Title>
            <Select
                idKey="id"
                labelKey="label"
                value={selectedStatus}
                placeholder="Select type"
                onChange={label => {
                    setSelectedStatus(label)
                    if (onStatusChange) {
                        onStatusChange(label)
                    }
                }}
                list={statusList}
            />

            <div>
                <Button
                    onClick={handleConfirm}
                >
                    confirmBtnTitle
                </Button>
            </div>
        </Modal>
    )
}

export default UpdateServerStatusModal

服务器组件

import { useEffect, useState } from 'react'
import axios from '@/lib/axios'
import Dropdown from '@/components/Dropdown'
import UpdateServerStatusModal from '@/components/updateServerStatusModal'

const Servers = () => {
    const [servers, setServers] = useState(null)
    const [selectedStatus, setSelectedStatus] = useState('')

    const handleUpdateStatus = server => {
        handleModalOpen(true, {
            title: 'Update Server Status',
            text: <span>Are you sure you want to update server status</span>,
            confirmText: 'Update Status',
            type: 'info',
            onConfirm: async () => {
                try {
                    await axios.put(`/api/servers/${server?.uuid}`, {
                        status: selectedStatus,
                    })
                }
            },
        })
    }

    return (
            <UpdateServerStatusModal
                open={modalProps?.open}
                setOpen={handleModalOpen}
                title={modalProps?.title}
                description={modalProps?.text}
                confirmBtnTitle={modalProps?.confirmText}
                variant={modalProps?.type}
                onConfirm={modalProps?.onConfirm}
                onStatusChange={newStatus => setSelectedStatus(newStatus)}
            />
    )
}

export default Servers

Answer 1

我认为你可以使用回调函数将道具从子组件传递到父组件。

父组件：

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [dataFromChild, setDataFromChild] = useState();

  const getDataFromChildHandler = (data) => {
    setDataFromChild(data);
  };

  return (
      <ChildComponent onDataFromChild={getDataFromChildHandler} />
  );
};

export default ParentComponent;

子组件：

import React from 'react';

const ChildComponent = ({ onDataFromChild }) => {

  const sendDataToParentHandler = () => {
    const data = "data from child component";

    onDataFromChild(data);
  };

  return (
    <>
      <button onClick={sendDataToParentHandler}>Send To Parent</button>
    </>
  );
};

export default ChildComponent;