React中点击表格行绑定contact id到表单contact字段的实现求助

实现方案 #

你只需要给表格行绑定点击事件，将当前行的contactID同步到表单的contactId字段即可，修改代码如下：

1. 修改map遍历中tr的逻辑 #

给<tr>添加点击事件，这里分两种常见场景适配：

如果你用的是Formik框架（从你代码里的Field、Uservalue判断大概率是）：

.map((contact, index) => {
  const firstName = contact.firstName;
  const lastName = contact.lastName;
  const fullName = `${firstName} ${lastName}`;
  return (
    // 新增点击事件和手型样式
    <tr 
      key={index}
      style={{cursor: 'pointer'}}
      onClick={() => {
        // 填充contactId到表单
        setFieldValue('contactId', contact.contactID)
        // 可选：点击后关闭弹窗、清空搜索词
        setModalOpen(false)
        // 如果搜索词是受控状态，加下面这行清空
        // setSearchTerm('')
      }}
    >
      <td style={{ width: "1%" }}>{contact.id}.</td>
      <td style={{ width: "5%" }}>{contact.contactID}</td>
      <td style={{ width: "5%" }}>{fullName}</td>
    </tr>
  );
});

如果你是自己用useState维护Uservalue状态：

把上面点击事件里的setFieldValue替换成你自己的状态更新方法即可：

onClick={() => {
  setUservalue(prev => ({
    ...prev,
    contactId: contact.contactID
  }))
  setModalOpen(false)
}}

2. 效果验证 #

修改完成后点击任意表格行，对应的contactID就会自动填充到表单的Contact Id输入框中，同时会自动关闭搜索弹窗，不用手动关闭。

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