如何从下拉菜单中获取值以在电子邮件中发送-解网

问：

在 React 中，我有一个联系人，上面有姓名、电子邮件和一个消息框，工作正常。提交时，这三个项目按应有的方式发送。但是，我正在尝试从下拉菜单中获取选定的项目以与它一起发送。我假设它可能不像其他三个项目那样简单，但我对这个项目感到茫然。谢谢！

这是我的联系表格页面。

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

export const Email = () => {
  const form = useRef();

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

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

  console.log(sendEmail);

  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'/>
      <Select name="title" options={Data} />
      <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>
  );
};

这是我正在导入和播放的数据列表，我正在尝试从中发送选定的选项。

[
    {
        "id": 1,
        "title": "Cheese Burger",
        "label": "four"
    },
    {
        "id": 2,
        "title": "Bacon Burger",
        "label": "five"
    }
]

JavaScript ReactJS的 React-Native Email 下拉菜单

import React from 'react';
import { useForm, Controller } from 'react-hook-form'
import emailjs from '@emailjs/browser';
import Data from './data.json'
import Select from 'react-select'

export const Email = () => {
  // react-hook-form functions / state 
  const { handleSubmit, register, control  } = useForm()

  // update the submit function for emailjs.send
  const sendEmail = (data) => {
    emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', data, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text)
      }, (error) => {
          console.log(error.text)
      })
  }

  return (
    <form onSubmit={ handleSubmit(sendEmail) } className="flex flex-col mx-7 md:w-[30%] md:mx-auto">
      <label className="font-semibold">Name</label>
      <input {...register('user_name')} type="text" className="rounded-md border-2 border-purple-500"/>

      <label className="font-semibold">Email</label>
      <input {...register('user_email')} type="email" className="rounded-md border-2 border-purple-500"/>

      <label className="font-semibold">Message</label>
      <textarea {...register('message')} className='rounded-md border-2 border-purple-500'/>

      <Controller 
        name='select'
        control={control}
        render={({ field }) => (
            <Select {...field}  options={Data} />
        )}
      />

      <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>
  )
}

您将注册每个输入，并且任何自定义组件都将包装在从 react-hook-form 导入的组件中。<Select><Controller />

你可以随心所欲地做任何事情，但上面的例子是最基本的，没有任何类型的字段验证、规则等。

提交的表单数据将采用json对象的形式，其中键是传递给寄存器函数的名称，或者在控制器的情况下是name属性。

然后，您可以像以前在电子邮件模板中访问这些值一样访问这些值。等等，用于那些简单的值。由于我真的不知道您想要从数据对象传递什么，因此我将整个对象以名称传递给您的 sendEmail 函数。在电子邮件模板端，您将获得如下值： .{{user_name}} {{user_email}} {{message}}select{{select.id}} {{select.label}} {{select.title}}

尝试从电子邮件模板中的对象中获取值，仅使用对象的名称将打印在电子邮件中，而不是任何信息。{{select}}[object Object]

上一个：退出码：128 命令：git 主机密钥验证失败。fatal：无法从远程存储库读取 |电子邮件js

下一个：使用 Nodemailer 和 Gmail SMTP 从 nodejs 应用程序发送电子邮件

如何从下拉菜单中获取值以在电子邮件中发送

How to get a value from a dropdown menu to send in an e-mail

评论