React中如何获取下拉选框值并随邮件发送？

问题核心：react-select是自定义UI组件，不属于原生表单元素，EmailJS的sendForm方法只能自动收集原生input/textarea/select的值，所以直接给Select加name属性无法被捕获。以下是两种可行的解决方法：

方案一：用隐藏Input同步选中值 #

通过添加隐藏的原生input，将react-select的选中值同步到这个input中，让sendForm能自动收集该字段。

修改后的代码：

import React, { useRef, useState } from 'react';
import emailjs from '@emailjs/browser';
import Data from './data.json'
import Select from 'react-select'

export const Email = () => {
  const form = useRef();
  const [selectedOption, setSelectedOption] = useState(null);

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('xxxxx', 'xxxxxx', form.current, 'xxxxxx')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail} className="flex flex-col mx-7 md:w-[30%] md:mx-auto">
      <label className="font-semibold">Name</label>
      <input type="text" name="user_name" className="rounded-md border-2 border-purple-500"/>
      <label className="font-semibold">Email</label>
      <input type="email" name="user_email" className="rounded-md border-2 border-purple-500"/>
      <label className="font-semibold">Message</label>
      <textarea name="message" className='rounded-md border-2 border-purple-500'/>
      <label className="font-semibold">Select Item</label>
      <Select 
        options={Data} 
        value={selectedOption}
        onChange={(option) => setSelectedOption(option)}
        getOptionLabel={(option) => option.title}
        getOptionValue={(option) => option.title}
      />
      {/* 隐藏input，用于EmailJS收集选中值 */}
      <input 
        type="hidden" 
        name="selected_item" 
        value={selectedOption ? selectedOption.title : ''} 
      />
      <input type="submit" value="Send" className="font-semibold w-16 mx-auto mt-7 rounded-md bg-purple-300 hover:cursor-pointer hover:border-purple-800 hover:bg-purple-500 border-2 border-purple-500"/>
    </form>
  );
};

注意：需要在EmailJS的邮件模板中添加{{selected_item}}变量，才能在邮件中显示选中的内容。

方案二：手动构造表单数据，使用EmailJS.send方法 #

放弃sendForm，手动收集所有表单字段（包括react-select的选中值），用emailjs.send方法发送数据，灵活性更高。

修改后的代码：

import React, { useRef, useState } from 'react';
import emailjs from '@emailjs/browser';
import Data from './data.json'
import Select from 'react-select'

export const Email = () => {
  const form = useRef();
  const [selectedOption, setSelectedOption] = useState(null);

  const sendEmail = (e) => {
    e.preventDefault();

    // 手动收集所有表单数据
    const formData = {
      user_name: form.current.user_name.value,
      user_email: form.current.user_email.value,
      message: form.current.message.value,
      selected_item: selectedOption ? selectedOption.title : ''
    };

    emailjs.send('xxxxx', 'xxxxxx', formData, 'xxxxxx')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail} className="flex flex-col mx-7 md:w-[30%] md:mx-auto">
      <label className="font-semibold">Name</label>
      <input type="text" name="user_name" className="rounded-md border-2 border-purple-500"/>
      <label className="font-semibold">Email</label>
      <input type="email" name="user_email" className="rounded-md border-2 border-purple-500"/>
      <label className="font-semibold">Message</label>
      <textarea name="message" className='rounded-md border-2 border-purple-500'/>
      <label className="font-semibold">Select Item</label>
      <Select 
        options={Data} 
        value={selectedOption}
        onChange={(option) => setSelectedOption(option)}
        getOptionLabel={(option) => option.title}
        getOptionValue={(option) => option.title}
      />
      <input type="submit" value="Send" className="font-semibold w-16 mx-auto mt-7 rounded-md bg-purple-300 hover:cursor-pointer hover:border-purple-800 hover:bg-purple-500 border-2 border-purple-500"/>
    </form>
  );
};

同样，需在EmailJS模板中添加{{selected_item}}来展示选中项。

额外说明：你的data.json中选项用title作为显示文本，react-select默认识别label和value字段，所以必须通过getOptionLabel和getOptionValue手动指定字段，否则下拉选项会显示异常。

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