React中如何将子组件点击的联系人fullName、ID等数据传递给上层父组件

实现子组件向父组件传值的核心逻辑是：父组件提前定义接收数据的回调函数，将该函数作为props传递给子组件；子组件触发对应事件时，调用该回调并把需要传递的数据作为参数传入。

修改父组件 MainContent #

• 新增状态存储选中的联系人数据用于父层展示，定义接收子组件数据的回调函数，将回调函数作为props传递给Contacts组件

// 父组件
import { useState } from 'react';
const MainContent = ({contacts,setcontacts}) => { 
  // 存储子组件传过来的选中联系人
  const [selectedContact, setSelectedContact] = useState({})

  // 接收子组件数据的回调方法
  const getSelectedContact = (contact) => {
    // 此处可对拿到的联系人数据做任意业务处理
    setSelectedContact(contact)
    // 如果需要修改contacts数组可直接调用setcontacts操作
  }

  return (
    <div>
       <p>{selectedContact.fullName}</p>
       <p>{selectedContact.phone}</p> 
       <p>{selectedContact.id}</p> 

      {/* 将回调函数传给子组件 */}
      <Contacts contacts={contacts} onSendContact={getSelectedContact}/>
    </div>
  );
};
export default MainContent;

修改子组件 Contacts #

• 接收父组件传的回调函数props，点击按钮时调用回调并传入当前遍历的联系人数据即可

// 子组件
const Contacts = ({contacts, onSendContact}) => {
  return (
    <div>
      {contacts.map((contact) => (
        <div key={contact.id}>
          <p>{contact.fullName}</p>
          <p>{contact.phone}</p>
          <div>
            {/* 点击时触发父组件回调，传入当前联系人的全量数据 */}
            <button onClick={() => onSendContact(contact)}>send</button>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Contacts;

内容的提问来源于stack exchange，提问作者Good