React中map循环内点击按钮向ClientProfile弹窗传user.id的语法咨询

实现方案 #

核心逻辑是将原本存储弹窗开关状态的布尔值，替换为存储当前选中的用户ID，即可实现ID传递需求：

1. 修改状态定义

把原来的布尔类型弹窗状态改为存储选中的用户ID，初始值为null代表弹窗关闭：

// 替换你原代码中的 const [client, setClient] = useState(false)
const [selectedClientId, setSelectedClientId] = useState(null)

2. 调整弹窗开关函数

修改打开弹窗的函数接收ID参数，新增关闭弹窗的方法给弹窗组件内部调用：

// 打开弹窗，接收选中的用户ID
function openClientProfile(userId) {
  setSelectedClientId(userId)
}

// 关闭弹窗
function closeClientProfile() {
  setSelectedClientId(null)
}

3. 修改循环内的按钮点击逻辑

给onClick绑定箭头函数，把当前遍历到的user.id传递给打开弹窗的方法，同时注意给map遍历的tr元素加唯一key属性：

<button onClick={() => openClientProfile(user.id)}>
  {user.firstname}
</button>

4. 修改弹窗组件传参逻辑

只要selectedClientId不为null就渲染弹窗，同时把ID和关闭方法传递给组件：

{selectedClientId && <ClientProfile id={selectedClientId} onClose={closeClientProfile} />}

后续你在ClientProfile组件内部可以直接通过props.id拿到选中的用户ID，点击关闭按钮时调用props.onClose()即可关闭弹窗。

完整可运行示例代码 #

const [selectedClientId, setSelectedClientId] = useState(null)

function openClientProfile(userId) {
  setSelectedClientId(userId)
}

function closeClientProfile() {
  setSelectedClientId(null)
}

return (
  <>
    {selectedClientId && <ClientProfile id={selectedClientId} onClose={closeClientProfile} />}

    <table>
      <tbody>
        {filteredList(users, search).map((user) => (
          <tr key={user.id} style={styles.tr}>
            {/* 原代码缺失td标签，tr下直接放button不符合HTML规范，此处补充 */}
            <td>
              <button onClick={() => openClientProfile(user.id)}>
                {user.firstname}
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </>
)

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