如何在反應中將 id child 傳遞給父組件？

Question

我創建了一個自定義ListComponent並在DashboardComponent中使用。 我已經導入了 ListComponent 並在其中傳遞了數據，並且列表將呈現在 DashboardComponent 中。 我創建了 function 來獲取特定 object 的 id。 因此，每當我單擊任何列表時，都會在ListComponent中獲得 id。 但是，我想在我無法做到的 DashboardComponet 上傳遞這個 id。

列表組件代碼：

import React, { Component } from "react";
import {Text,View} from "react-native";
import { List,ListItem} from "native-base";

export default class ListComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      
      opID: "",
   
    }; 
  }

   getUserId  = (id) => {
    console.log("id",id);
   this.setState({opID:id})
    
  };
render() {
    return (
      <View style={optionUI.container}>
     
        <List>
            {this.props.data.map((Opt, i) => (
                    <ListItem
                      key={Opt.id}
                      opID = {this.props.opID}
                      noBorder
                      onPress={() =>
                        this.getUserId(Opt.id)
                      }
                    >
                      <Text>{Opt.title}</Text>
                    </ListItem>
                  ))}
                </List>
              </View>
    );
  }
}

儀表板組件：

import React, { StrictMode, Component } from "react";
import { View} from "react-native";
import ListComponent from "../components/Option";
export default class DashboardComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      userList: [...data...],
     
    };

    
  }

  componentDidMount() {
   
  }
render() {
    const {userList} = this.state;
    console.log("users",this.props);
   return (
      <StrictMode>
        <View style={dashboardUI.optionSection}>
         <ListComponent data={userList.options} />
         </View>
         </StrictMode>
    );
  }
}

數據：

userList={
  "options": [
    {
      "id": 1,
      "optId":1,
      "title": "Reliance Industries Limited",
      "subtitle": "Multinational conglomerate company"
    },
    {
      "id": 2,
      "optId":2,
      "title": "Aditya Birla Group",
      "subtitle": "Corporate group company"
    },
    {
      "id": 3,
      "optId":3,
      "title": "Adani Group",
      "subtitle": "Multinational conglomerate company"
    },
    {
      "id": 4,
      "optId":4,
      "title": "Piramal Group",
      "subtitle": "Conglomerate company"
    },
    {
      "id": 5,
      "optId":5,
      "title": "Hindustan Zinc",
      "subtitle": "Mining company"
    }
  ]
}

Answer 1

在 DashboardComponent 中使用 props 傳遞 function

 <ListComponent data={userList.options} onClick = {this.onClickItem.bind(this)} />

並與 function

onClickItem = (id) => {
 console.log("id...",id); 
 }

在 ListComponent class 中調用 function onPress

 getUserId  = (id) => {
   this.props.onClick(id) //Call the function

   this.setState({opID:id})
  };