React实现点击邮箱ID跳转至Email组件并填充输入框的方法

嘿，我来帮你搞定这个需求！这完全是模仿Gmail点击邮箱自动填收件人的逻辑嘛，咱们一步步来实现：

第一步：修改邮箱链接，传递收件人参数 #

首先得把点击的邮箱地址通过路由传递给Email组件，最简单的方式就是用URL的查询参数（search params）。把你原来的<Link>改成这样：

<Link to={`/Email?recipient=${encodeURIComponent(view.email)}`}>{view.email}</Link>

用encodeURIComponent是为了处理邮箱里可能有的特殊字符，避免URL解析出错。

第二步：确保Email组件能接收路由参数 #

假设你用的是React Router v6（现在主流版本），先确认你的路由配置里已经包含了Email组件的路由：

// 在你的路由配置文件里
import { Routes, Route } from 'react-router-dom';
import Email from './path/to/Email';

function App() {
  return (
    <Routes>
      {/* 其他路由 */}
      <Route path="/Email" element={<Email />} />
    </Routes>
  );
}

第三步：在Email组件里获取参数并填充输入框 #

在Email组件中，用React Router的useSearchParams钩子来获取URL里的收件人参数，然后把它设置为输入框的初始值：

import { useState } from 'react';
import { useSearchParams } from 'react-router-dom';

function Email() {
  // 获取URL查询参数
  const [searchParams] = useSearchParams();
  const recipientEmail = searchParams.get('recipient');

  // 用useState管理输入框的值，初始化时传入获取到的邮箱
  const [toEmail, setToEmail] = useState(recipientEmail || '');

  return (
    <div className="email-compose">
      <label>收件人：</label>
      <input
        type="email"
        value={toEmail}
        onChange={(e) => setToEmail(e.target.value)}
        placeholder="请输入收件人邮箱"
      />
      {/* 这里可以加邮件主题、内容等其他组件 */}
    </div>
  );
}

export default Email;

如果你的项目用的是React Router v5，那获取参数的方式略有不同，用useLocation结合URLSearchParams：

import { useState } from 'react';
import { useLocation } from 'react-router-dom';

function Email() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const recipientEmail = searchParams.get('recipient');

  const [toEmail, setToEmail] = useState(recipientEmail || '');

  // 剩下的代码和上面一样
}

关于组件复用的说明 #

这样实现后，每次点击不同的邮箱链接，都会跳转到同一个Email组件，但因为URL参数不同，组件会重新获取参数并初始化输入框的值，完全满足“复用Email组件”的需求——相当于每次打开都是一个新的撰写会话，但用的是同一个组件实例（或者根据路由机制重新渲染，效果一致）。

顺便优化下你原来的表格代码 #

看你原来的代码，Data.map每次循环都返回一个完整的Table（包括Header），这样会生成多个表格，应该是把Header放在循环外面，只循环表格行更合理：

<Segment>
  <Table>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>firstName</Table.HeaderCell>
        <Table.HeaderCell>Email</Table.HeaderCell>
        <Table.HeaderCell>Applied On</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      {Data.map(view => (
        <Table.Row key={view.Id}>
          <Table.Cell>{view.firstName}</Table.Cell> {/* 这里应该用view的firstName，不是固定文本哦 */}
          <Table.Cell>
            <Link to={`/Email?recipient=${encodeURIComponent(view.email)}`}>{view.email}</Link>
          </Table.Cell>
          <Table.Cell>{view.date}</Table.Cell>
        </Table.Row>
      ))}
    </Table.Body>
  </Table>
</Segment>

这样表格结构更清晰，也符合常规的数据展示方式~

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