React中如何实时更新mailto链接的subject与body参数？

The issue occurs because you're using plain JavaScript variables (mailTitle, mailBody) instead of React state. React doesn't track changes to regular variables, so the component doesn't re-render when their values update—this is why the mailto href stays undefined until a refresh. Additionally, your onChange handlers don't properly pass the event parameter, which would cause runtime errors.

Fix Steps: #

• Use React's useState hook to manage input values. State changes trigger component re-renders, updating the mailto link in real time without needing a page refresh.
• Properly pass the event parameter to your onChange handlers.
• Encode the subject and body using encodeURIComponent to handle special characters (spaces, symbols, etc.) correctly in the mailto URL.

Corrected Code: #

import { useState } from 'react';

function Contact() {
  const [mailTitle, setMailTitle] = useState('');
  const [mailBody, setMailBody] = useState('');

  return (
    <SiteContainer>
      <>
        <div className="md:col-span-2 row-span-3 bg-opacity-50 bg-white dark:bg-white/5 rounded-md p-4 border border-zinc-800/50">
          <h1 className="font-bold text-sm dark:text-slate-500 mb-1">SUBJECT</h1>
          <input
            placeholder="How's it going?"
            type="text"
            value={mailTitle}
            onChange={(event) => setMailTitle(event.target.value)}
            className="w-full p-2 mb-4 rounded-md bg-slate-300/50 dark:bg-slate-200/5 text-sm placeholder:text-gray-600 dark:placeholder:text-slate-200/20"
          />

          <h1 className="font-bold text-sm dark:text-slate-500 mb-1">BODY</h1>
          <textarea
            value={mailBody}
            onChange={(event) => setMailBody(event.target.value)}
            placeholder="Tell me about your day."
            className="w-full p-2 h-36 mb-4 rounded-md bg-slate-300/50 dark:bg-slate-200/5 text-sm placeholder:text-gray-600 dark:placeholder:text-slate-200/20"
          />

          <div className="w-full flex flex-row justify-between items-center">
            <p className="text-gray-900 dark:text-gray-300 text-sm"></p>

            <a
              target="_blank"
              href={`mailto:westerdijk@pm.me?subject=${encodeURIComponent(mailTitle)}&body=${encodeURIComponent(mailBody)}`}
              className="border border-gray-800 hover:bg-gray-200 dark:border-indigo-600/80 dark:bg-indigo-600/70 dark:hover:bg-indigo-500/70 flex flex-row items-center justify-center rounded-full px-5 py-2 text-sm font-medium transition-colors duration-75"
            >
              <span className="mt-[2px]">Send</span>
            </a>
          </div>
        </div>
      </>
    </SiteContainer>
  );
}

Key Notes: #

• Reactive State: useState creates variables that React tracks. When setMailTitle or setMailBody is called, React automatically re-renders the component with the new values, updating the mailto href instantly.
• Controlled Inputs: Adding value={mailTitle} and value={mailBody} ensures the input's displayed content always matches the state, preventing inconsistencies.
• URL Encoding: encodeURIComponent converts special characters into URL-safe formats, so spaces, ampersands, and other symbols won't break the mailto link structure.

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