EmailJS配合AntD使用时Select组件值无法发送至邮件问题求助

问题根因 #

AntD的Select组件是自定义封装的UI组件，没有渲染原生<select>标签，而emailjs.sendForm方法默认只会读取表单内符合浏览器规范的原生可提交元素的name属性和对应值，因此无法自动获取到Select的选中值；其余AntD的Input组件本质还是渲染原生input标签，所以可以正常传值。

可用修复方案 #

方案1：改用emailjs.send方法手动收集字段（最灵活） #

放弃依赖sendForm自动读取原生表单的逻辑，自己组装所有要提交的字段值传给emailjs.send方法即可：

import { useState } from 'react';

const ContactUs = (props) => {
  // 存储Select组件的选中值
  const [courseLevel, setCourseLevel] = useState('');

  function sendEmail(e) {
    e.preventDefault();
    // 手动组装所有提交字段
    const submitData = {
      email: e.target.email.value,
      full_name: e.target.full_name.value,
      course_level: courseLevel,
      telephone: e.target.telephone.value,
      add_inform: e.target.add_inform.value
    };

    emailjs.send('你的服务ID', '你的模板ID', submitData, '你的用户ID')
      .then((result) => {
        console.log(result.text);
      }, (error) => {
        console.log(error.text);
      });
    e.target.reset();
    setCourseLevel('');
  }


  return (
    <Content style={{margin: '0 16px'}}>
        <Breadcrumb style={{margin: '16px 0'}}>
            <Breadcrumb.Item> </Breadcrumb.Item>
        </Breadcrumb>
        <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
            <div className="container">
                <form onSubmit={sendEmail}>
                    <div >
                        <Input placeholder="Email" name={"email"} />
                    </div>
                    <div>
                        <Input placeholder="Full name" name={"full_name"}   />
                    </div>
                    <div>
                        <Select 
                          defaultValue="Course Level"
                          value={courseLevel}
                          onChange={setCourseLevel}
                        >
                            <Option value="a1">A1</Option>
                            <Option value="a2">A2</Option>
                            <Option value="b1">B1</Option>
                            <Option value="b2">B2</Option>
                        </Select>
                    </div>
                    <div>
                        <Input placeholder="Basic usage" name={"telephone"}  />
                    </div>
                    <div>
                        <Input placeholder="Basic usage" name={"add_inform"}  />
                    </div>
                    <div>
                        <Button type="primary" htmlType="submit" style={{marginRight: "10px"}}>
                            Submit
                        </Button>
                    </div>
                </form>
            </div>
        </div>
    </Content>
);
}

方案2：新增隐藏原生input同步值（改动最小） #

如果不想修改原有sendForm的调用逻辑，可以新增一个name和提交字段匹配的隐藏原生input，将Select的选中值同步到这个input上，sendForm就能正常读取到：

// 仅列出修改的Select部分代码
const [courseLevel, setCourseLevel] = useState('');
<div>
    <Select 
      defaultValue="Course Level"
      value={courseLevel}
      onChange={setCourseLevel}
    >
        <Option value="a1">A1</Option>
        <Option value="a2">A2</Option>
        <Option value="b1">B1</Option>
        <Option value="b2">B2</Option>
    </Select>
    {/* 新增隐藏input，name和要提交的字段名一致 */}
    <input type="hidden" name="course_level" value={courseLevel} />
</div>

方案3：使用AntD Form组件统一管控表单（符合AntD最佳实践） #

如果你的项目本身就大量使用AntD组件，直接用AntD官方的Form组件包裹所有表单项，提交时可以直接获取到所有字段的聚合值，不用单独处理Select：

import { Form } from 'antd';

const ContactUs = (props) => {
  const [form] = Form.useForm();

  function sendEmail() {
    // 校验通过后直接获取所有表单项值
    form.validateFields().then(values => {
      emailjs.send('你的服务ID', '你的模板ID', values, '你的用户ID')
        .then((result) => {
            console.log(result.text);
            form.resetFields();
        }, (error) => {
            console.log(error.text);
        });
    })
  }


  return (
    <Content style={{margin: '0 16px'}}>
        <Breadcrumb style={{margin: '16px 0'}}>
            <Breadcrumb.Item> </Breadcrumb.Item>
        </Breadcrumb>
        <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
            <div className="container">
                <Form form={form} onFinish={sendEmail}>
                    <Form.Item name="email">
                        <Input placeholder="Email" />
                    </Form.Item>
                    <Form.Item name="full_name">
                        <Input placeholder="Full name" />
                    </Form.Item>
                    <Form.Item name="course_level" initialValue="Course Level">
                        <Select>
                            <Option value="a1">A1</Option>
                            <Option value="a2">A2</Option>
                            <Option value="b1">B1</Option>
                            <Option value="b2">B2</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="telephone">
                        <Input placeholder="Basic usage" />
                    </Form.Item>
                    <Form.Item name="add_inform">
                        <Input placeholder="Basic usage" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{marginRight: "10px"}}>
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    </Content>
);
}

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