Question

我正在使用create-react-app或我的项目。我创建了一个表单字段，我将数据存储到状态中。我想将这些数据作为电子邮件发送，而我却失去了如何这样做。

其中一个问题是使用create-react-app，我不知道在哪里可以找到节点中的路由器或服务器页面。

非常感谢任何帮助。

import React, { Component } from 'react';
import { Button, Col, Grid, Row, Form, FormGroup, FormControl, 
ControlLabel, Checkbox } from 'react-bootstrap';

export class Contact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            email: "",
            message: ""
        }
    }

    onChange = (e) => {
        const state = this.state;
        state[e.target.name] = e.target.value;
        this.setState(state);
    }

    onSubmit = (e) => {
        e.preventDefault();
        const { name, email, message } = this.state;


    }




    render() {
        const { name, email, message } = this.state;
        return(
            <div>
                <Grid>
                    <Row id="contactForm">
                        <Col xs={2}>
                        </Col>
                        <Col xs={8}>
                            <Form horizontal onSubmit={this.onSubmit}>
                                <FormGroup >
                                  <Col componentClass={ControlLabel} sm={2}>
                                    Name
                                  </Col>
                                  <Col sm={10}>
                                    <FormControl required value={name} name="name" type="name" 
                                    placeholder="Name" onChange={this.onChange} />
                                  </Col>
                                </FormGroup>

                                <FormGroup controlId="formHorizontalPassword">
                                  <Col componentClass={ControlLabel} sm={2}>
                                    Email
                                  </Col>
                                  <Col sm={10}>
                                    <FormControl required value={email} name="email" type="email" 
                                    placeholder="Email" onChange={this.onChange}/>
                                  </Col>
                                </FormGroup>

                                <FormGroup>
                                    <Col componentClass={ControlLabel} bsSize="lg" sm={2}>
                                        Message
                                    </Col>
                                    <Col sm={10}>
                                        <FormControl required value={message} name="message" componentClass="textarea" style={{ height: 200 }} 
                                        type="message" placeholder="Insert message here" onChange={this.onChange}/>
                                    </Col>
                                </FormGroup>

                                <FormGroup>
                                  <Col smOffset={2} sm={10}>
                                    <Checkbox>Flag as important</Checkbox>
                                  </Col>
                                </FormGroup>

                                <FormGroup>
                                  <Col smOffset={2} sm={10}>
                                    <Button type="submit">
                                      Send
                                    </Button>
                                  </Col>
                                </FormGroup>
                            </Form>
                        </Col>
                        <Col xs={2}>
                        </Col>
                    </Row>
                </Grid>
            </div>
        )
    }
}

Answer 1

简短回答是您无法从客户端发送邮件。您需要有一台服务器才能这样做。如果你有一个你的React消费的api服务，那么很可能从那里开始。

将表单数据发送到电子邮件

1 个答案: