Reactjs 从ReactDataGridtry 将数据传递给父组件

我正在try 将一个id从一个表组件(我正在使用ReactDataGrid库来呈现一个表)传递给父组件，这样我就可以在另一个子组件中使用它. 以下是我的父组件:

const CallForm = (props) => {
    const [isNewOpen, setIsNewOpen] = useState(false);
    const toggleNewPopup = () => {
        setIsNewOpen(!isNewOpen);
    }
    const [isEditOpen, setIsEditOpen] = useState(false);
    const toggleEditPopup = () => {
        setIsEditOpen(!isEditOpen);
    }
    return (
            <Table type={props.screenType === "taskScreen" ? "tasks" : "calls"} />//Trying to receive the id from here.//
            <div className="actions">
                <div className="buttons-actions">
                    <button onClick={toggleNewPopup}>{newCallText}</button>
                    {isNewOpen && <CallPopUp
                    state="add"
                    screenType={props.screenType}
                    handleClose={toggleNewPopup}
                    />}
                    <button onClick={toggleEditPopup}>{editCallText}</button>
                    {isEditOpen && <CallPopUp
                    state="edit"
                    id={}//Pass the id in here.//
                    screenType={props.screenType}
                    handleClose={toggleEditPopup}
                    />}
                    <button onClick={props.screenType === "taskScreen" ? closeTask : closeCall}> {closeCallText}</button>
                    <button onClick={props.screenType === "taskScreen" ? deleteTask : deleteCall}>{deleteCallText}</button>
                    <button onClick={props.screenType === "taskScreen" ? moveTask : moveCall}>{moveCallText}</button>
                </div>
                <div className="free-search">
                    <label htmlFor="freeSearch">Free Search</label>
                    <input type="text" name='freeSearch' id='freeSearch' />
                </div>
            </div>
}

这是表组件:

const Table = (props) => {
    const [elementId, setElementId] = useState("");
            return (
                <div>
                     <ReactDataGrid
                        idProperty='id'
                        columns={headers}
                        dataSource={allTasks}
                        theme='default-light'
                        rtl={true}
                        scrollThreshold={false}
                        enableColumnAutosize={true}
                        //Return the id to parent component.//
                    />
                    <div className='info'>{rowsText}</div>
                </div>
            )

这是CallPopUp组件:

const CallPopUp = (props) => {
  return (
      //Inputs including elements, in case of "edit" state the old data is shown in values.//
      //In order for me to call to the API get, put or delete request from server I need the id from the table element.//

我试着使用https://reactdatagrid.io/docs/的文档，我遇到了一些我认为可能会有帮助的解决方案，但我不知道如何使用它们. 例如: 来源:https://reactdatagrid.io/docs/api-reference#method-getItemAt

getItemAt
Fn(index)
Number
Returns the item at the specified index in the dataSource.

来源:https://reactdatagrid.io/docs/api-reference#method-getRowId

getRowId
Fn(index)
String|Number
Returns the id of the row at the specified index.

来源:https://reactdatagrid.io/docs/row-selection

Single row selection and keyboard navigation
Let's start with a simple example without support for selection. Try clicking the <ReactDataGrid /> below and then navigate with up/down keyboard arrows. Notice the currently active row changes as you hit arrow up/down. By default keyboard navigation is enabled, but you can turn it off by specifying enableKeyboardNavigation=false. You can also use home/end or page up/down to navigate the <ReactDataGrid /> rows. Additionally, when you move your mouse over a <ReactDataGrid /> row, it shows a hover state (this can be disabled by using showHoverRows=false).
Use activeIndex (controlled) or defaultActiveIndex (uncontrolled), combined with onActiveIndexChange to have full control on user navigation and the currently active row in the <ReactDataGrid />.
When using the controlled activeIndex prop and onActiveIndexChange callback prop to update the activeIndex, if you're doing other compute intensive stuff on the render function, you might notice some performance degradation in the scenario when the user keeps arrow up/down key pressed to quickly navigate to other records. If this is the case, it's better to use the uncontrolled defaultActiveIndex prop instead to obtain better performance.
When navigating the <ReactDataGrid /> with keyboard navigation, as the active index is updated, the <ReactDataGrid /> is automatically scrolled to show the currently active row in the viewport.