React Native表单Submit按钮处理：如何收集表单数据发送到指定邮箱

下面是两种常用的落地方式，你可以根据自己的开发资源选择：

方案1：通过后端接口转发（最推荐，用户无感知） #

这种方式所有逻辑可控，用户不需要离开应用就能完成提交，体验最好。

前端表单实现示例 #

用基础的useState管理表单状态即可，不需要复杂的第三方表单库：

import { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';

const ContactForm = () => {
  // 定义表单字段，可根据你的需求增减字段
  const [formData, setFormData] = useState({
    name: '',
    contactEmail: '',
    message: ''
  });

  // 统一更新表单字段
  const updateFormField = (field, value) => {
    setFormData(prev => ({...prev, [field]: value}));
  };

  const handleSubmit = async () => {
    // 提交前先做校验
    if (!formData.name || !formData.contactEmail || !formData.message) {
      Alert.alert('提示', '请补全所有必填字段');
      return;
    }
    try {
      // 调用你自己的后端接口
      const res = await fetch('你的后端接口地址', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
      if (res.ok) {
        Alert.alert('提交成功', '我们会尽快与你联系');
        // 提交成功后清空表单
        setFormData({name: '', contactEmail: '', message: ''});
      } else {
        Alert.alert('提交失败', '请稍后重试');
      }
    } catch (e) {
      console.error('提交错误', e);
      Alert.alert('提交失败', '请检查网络后重试');
    }
  };

  return (
    <View style={{padding: 20}}>
      <TextInput
        placeholder="你的姓名"
        value={formData.name}
        onChangeText={val => updateFormField('name', val)}
        style={{borderBottomWidth: 1, marginBottom: 15, padding: 8}}
      />
      <TextInput
        placeholder="联系邮箱"
        value={formData.contactEmail}
        onChangeText={val => updateFormField('contactEmail', val)}
        keyboardType="email-address"
        style={{borderBottomWidth: 1, marginBottom: 15, padding: 8}}
      />
      <TextInput
        placeholder="反馈内容"
        value={formData.message}
        onChangeText={val => updateFormField('message', val)}
        multiline
        numberOfLines={4}
        style={{borderBottomWidth: 1, marginBottom: 20, padding: 8, textAlignVertical: 'top'}}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default ContactForm;

后端逻辑说明 #

后端没有语言限制，你可以用Node.js、Python、Java等任意技术栈开发，只需要实现两个能力：

• 接收前端传过来的表单数据
• 集成发邮件的依赖（比如Node.js用nodemailer），把表单内容转发到你指定的邮箱即可
  所有邮件发送的鉴权逻辑必须放在后端处理，不要在前端硬编码邮箱服务的密钥，避免泄露。

方案2：调用设备本地邮件应用（无需后端，适合小应用） #

如果暂时没有后端开发资源，可以选择这种方案，点击提交后会调起用户设备上的邮件应用，自动填好收件人、主题、内容，用户手动点击发送即可完成提交。

实现示例 #

先安装依赖：
npm install react-native-email-link

import { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';
import { composeMail } from 'react-native-email-link';

const ContactForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    contactEmail: '',
    message: ''
  });

  const updateFormField = (field, value) => {
    setFormData(prev => ({...prev, [field]: value}));
  };

  const handleSubmit = () => {
    if (!formData.name || !formData.contactEmail || !formData.message) {
      Alert.alert('提示', '请补全所有必填字段');
      return;
    }
    // 拼接邮件内容
    const emailBody = `
姓名：${formData.name}
联系邮箱：${formData.contactEmail}
反馈内容：${formData.message}
    `;
    composeMail({
      to: '你的指定收件邮箱@xxx.com',
      subject: '应用联系表单提交',
      body: emailBody
    }).catch(() => {
      Alert.alert('调起邮件应用失败', '请检查是否安装了邮件应用，或手动发送邮件到你的指定收件邮箱');
    });
  };

  // 表单UI和方案1完全一致
  return (
    <View style={{padding: 20}}>
      <TextInput
        placeholder="你的姓名"
        value={formData.name}
        onChangeText={val => updateFormField('name', val)}
        style={{borderBottomWidth: 1, marginBottom: 15, padding: 8}}
      />
      <TextInput
        placeholder="联系邮箱"
        value={formData.contactEmail}
        onChangeText={val => updateFormField('contactEmail', val)}
        keyboardType="email-address"
        style={{borderBottomWidth: 1, marginBottom: 15, padding: 8}}
      />
      <TextInput
        placeholder="反馈内容"
        value={formData.message}
        onChangeText={val => updateFormField('message', val)}
        multiline
        numberOfLines={4}
        style={{borderBottomWidth: 1, marginBottom: 20, padding: 8, textAlignVertical: 'top'}}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

这种方式的劣势是依赖用户设备安装了邮件应用，且需要用户手动点击发送，不方便做数据统计。

通用注意事项 #

• 所有表单提交前必须做字段校验，避免无效数据提交
• 如果你用后端方案，建议给接口加限流规则，避免被恶意刷邮件

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