Javascript 在react.js中使用按钮同时发送表单和href

我已经构建了一个表单，用户可以通过发送按钮填写和发送表单（见下面的代码，最后的按钮）。它工作得非常好，但当用户单击“发送”时，该用户发送的输入就消失了（因此用户可能认为发送不起作用，尽管它确实起了作用）

我非常简单的解决方案是在按钮上添加一个href=“/xxx”。该href可以工作，但如果它位于按钮中，则当用户单击“发送”时不会发送表单

有人知道我如何通过一个按钮或另一种方式实现这两个功能（发送表单和href）

import React, { Component } from 'react'
import * as emailjs from 'emailjs-com'
import { Form } from 'reactstrap'
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { FormGroup } from '@material-ui/core';
import TextField from "@material-ui/core/TextField";
import FormHelperText from "@material-ui/core/FormHelperText";
import {indigo} from "@material-ui/core/colors";

const ColorButton = withStyles((theme) => ({
    root: {
        color: "#fff",
        backgroundColor: "#434A7E",
        '&:hover': {
            backgroundColor: indigo[200],
        },
        fontWeight: "bold",
        fontFamily: '"Segoe UI Emoji"',
    },
}))(Button);

const styles = {
    root: {
        '& .MuiTextField-root': {
            margin: "10px",
            width: '100ch',
        },
    },
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    textField: {
        marginLeft: "5%",
        marginRight: "5%",
        marginTop: "10px",
        marginBottom: "10px",
        width: "90%",
    },
    messageField: {
        marginLeft: "5%",
        marginRight: "5%",
        marginTop: "10px",
        marginBottom: "10px",
        width: "90%",
    },
    heroButtons: {
        marginLeft: "25%",
        marginRight: "25%",
        marginTop: "10px",
        marginBottom: "10px",
        width: "50%",

    },
};



class Buchungsformular extends Component {
    state = {
        email: '',
        subject: '',
        message: '',
        anfahrt: '',
        abfahrt: '',
        kinder: '',
        erwachsene: '',
        vorname: '',
        nachname: '',
    }
    handleSubmit(e) {
        e.preventDefault()
        const { email, subject, message, anfahrt, abfahrt, kinder, erwachsene, vorname, nachname } = this.state
        let templateParams = {
            email: email,
            to_name: 'Altes Waschhaus',
            subject: subject,
            message_html: message,
            anfahrt: anfahrt,
            abfahrt: abfahrt,
            kinder: kinder,
            erwachsene: erwachsene,
            vorname: vorname,
            nachname: nachname,

        }
        emailjs.send(
            'gmail',
            'template_4CvV5FV9',
            templateParams,
            'user_wAhmfmSiEivROjdwXA3Ls'
        )
        this.resetForm()
    }
    resetForm() {
        this.setState({
            email: '',
            message: '',
            anfahrt: '',
            abfahrt: '',
            kinder: '',
            erwachsene: '',
            vorname: '',
            nachname: '',
        })
    }
    handleChange = (param, e) => {
        this.setState({ [param]: e.target.value })
    }
    render() {
        const { classes } = this.props; //<----- grab classes here in the props

        return (
            <div>
                <Form onSubmit={this.handleSubmit.bind(this)}>
                    <div>
                        <FormGroup controlId="formBasicName">
                            <TextField
                                required
                                id="outlined-required"
                                label="Vorname"
                                defaultValue=" "
                                variant="outlined"
                                name="vorname"
                                className={classes.textField}
                                value={this.state.vorname}
                                onChange={this.handleChange.bind(this, 'vorname')}
                            />
                        </FormGroup>
                        <FormGroup controlId="formBasicName">
                            <TextField
                                required
                                id="outlined-required"
                                label="Nachname"
                                defaultValue=" "
                                variant="outlined"
                                name="nachname"
                                className={classes.textField}
                                value={this.state.nachname}
                                onChange={this.handleChange.bind(this, 'nachname')}
                            />
                        </FormGroup>
                    </div>
                    <FormGroup controlId="formBasicEmail">
                        <TextField
                            required
                            id="outlined-required"
                            label="E-Mail"
                            defaultValue=" "
                            variant="outlined"
                            name="email"
                            className={classes.textField}
                            value={this.state.email}
                            onChange={this.handleChange.bind(this, 'email')}
                        />
                    </FormGroup>
                    <div>
                        <FormGroup controlId="formBasicErwachsene">
                            <TextField
                                required
                                id="outlined-number"
                                label="Erwachsene"
                                type="number"
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                className={classes.textField}
                                variant="outlined"
                                value={this.state.erwachsene}
                                onChange={this.handleChange.bind(this, 'erwachsene')}

                            />
                        </FormGroup>
                        <FormGroup controlId="formBasicKinder">
                            <TextField
                                id="outlined-number"
                                label="Kinder (0-14 Jahre)"
                                type="number"
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                className={classes.textField}
                                variant="outlined"
                                value={this.state.kinder}
                                onChange={this.handleChange.bind(this, 'kinder')}

                            />
                        </FormGroup>
                        <FormGroup controlId="formBasicEmail">
                            <TextField
                                required
                                id="date"
                                label="Anreise"
                                type="date"
                                defaultValue="2020-06-01"
                                className={classes.textField}
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                variant="outlined"
                                value={this.state.anfahrt}
                                onChange={this.handleChange.bind(this, 'anfahrt')}
                            />
                        </FormGroup>
                        <FormGroup controlId="formBasicEmail">
                            <TextField
                                required
                                id="date"
                                label="Abfahrt"
                                type="date"
                                defaultValue="2020-06-01"
                                className={classes.textField}
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                variant="outlined"
                                value={this.state.abfahrt}
                                onChange={this.handleChange.bind(this, 'abfahrt')}
                            />
                        </FormGroup>
                        <FormGroup className={classes.textField} controlId="formBasicMessage">
                            <TextField
                                id="outlined-multiline-static"
                                label="Ihre Nachricht"
                                multiline
                                rows={10}
                                defaultValue=" "
                                variant="outlined"
                                name="message"
                                value={this.state.message}
                                onChange={this.handleChange.bind(this, 'message')}
                            />
                            <FormHelperText>Bitte geben sie hier an ob sie sich für die Ferienwohnung "Vilm" und/oder "Altes Waschhaus" interessieren.</FormHelperText>

                        </FormGroup>

                    </div>
                    <ColorButton  className={classes.heroButtons} type="submit" value="Send" variant="contained" color="primary" size="large" >
                        Send
                    </ColorButton>

                </Form>
            </div>
        )
    }
}
export default withStyles(styles)(Buchungsformular)

import React，{Component}来自“React”
从“emailjs com”导入*作为emailjs
从“reactstrap”导入{Form}
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Button”导入按钮；
从“@material ui/core”导入{FormGroup}；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/colors”导入{indigo}”；
const ColorButton=带有样式（（主题）=>({
根目录：{
颜色：“fff”，
背景色：“434A7E”，
“&：悬停”：{
背景颜色：靛蓝[200]，
},
fontWeight：“粗体”，
fontFamily:““Segoe UI表情符号”，
},
}))（按钮）；
常量样式={
根目录：{
“&.MuiTextField根”：{
边距：“10px”，
宽度：“100ch”，
},
},
容器：{
显示：“flex”，
flexWrap:“wrap”，
},
文本字段：{
保证金左列：“5%”，
marginRight：“5%”，
玛金托普：“10px”，
marginBottom：“10px”，
宽度：“90%”，
},
消息字段：{
保证金左列：“5%”，
marginRight：“5%”，
玛金托普：“10px”，
marginBottom：“10px”，
宽度：“90%”，
},
按钮：{
保证金左列：“25%”，
marginRight：“25%”，
玛金托普：“10px”，
marginBottom：“10px”，
宽度：“50%”，
},
};
类Buchungsformular扩展组件{
状态={
电子邮件：“”，
主题：''，
消息：“”，
安法哈特：“，
阿布法特：“，
金德：“，
埃尔瓦森：“，
名称：“”，
nachname:“，
}
handleSubmit（e）{
e、 预防默认值（）
const{email，subject，message，anfahrt，abfahrt，kinder，erwachsene，vorname，nachname}=this.state
让templateParams={
电邮:电邮,，
姓名：“阿尔特斯·瓦施豪斯”，
主题:主题,，
message_html:message，
安法哈特：安法哈特，
阿布法特：阿布法特，
金德：金德，
埃尔瓦森：埃尔瓦森，
vorname:vorname，
纳克纳姆：纳克纳姆，
}
emailjs.send(
“gmail”，
‘模板4CvV5FV9’，
模板参数，
“用户_wAhmfmSiEivROjdwXA3Ls”
)
这是resetForm（）中的
}
重置表单（）{
这是我的国家({
电子邮件：“”，
消息：“”，
安法哈特：“，
阿布法特：“，
金德：“，
埃尔瓦森：“，
名称：“”，
nachname:“，
})
}
handleChange=（参数，e）=>{
this.setState（{[param]：e.target.value}）
}
render（）{
const{classes}=this.props；//您可以在状态中添加一个属性，然后有条件地呈现一个“谢谢”消息，具体取决于该属性的状态。默认情况下，不会呈现该消息，因为属性值最初设置为
false
。然后您将在
handleSubmit
中更新该属性的值，并将其设置为
true

我部分更新了您的代码，为您提供了一个示例：

class Buchungsformular extends Component {
    state = {
        // ... your state props: email, subject, etc.
        sent: false, // this is the new property
    }
    handleSubmit(e) {
        // ... your code, send email, reset form, etc.
        this.setState({ sent: true });
    }
    // your other methods ...

    render() {
        // ...
        return (
            <div>
                {this.state.send && <p>
                    Vielen Dank f&uuml;r Ihre Anfrage...
                </p>}
                <Form onSubmit={this.handleSubmit.bind(this)}>
                    {* ... no changes here ... *}
                </Form>
            </div>
        )
    }
}

如您所见，您需要创建另一个属性
error
，以显示错误反馈（类似于感谢消息），以便用户得到通知并重试。
this.resetForm（）
发送后调用
（handleSubmit）
正在清除表单。向您的状态添加一个flag属性
gesendet
，并在
handleSubmit
内将其设置为
true
。然后，只要
gesendet
为true，您就会渲染一个“Danke”表单中的文本。；-@kruschid这听起来是一个很好的解决方案！不幸的是，我不知道如何添加flag属性。你能告诉我怎么做吗？Danke！：-）我用一个示例为你创建了一个答案。嗨，谢谢你的答案！我刚刚尝试过，但不幸的是我得到了以下错误：TypeError:Cannot Destructure“this.setState（…）”的e属性“email”未定义。handleSubmit（e）函数显示的错误听起来像是您正在尝试执行以下操作：
const{email，…}=this.setState（…）
，而它必须是
const{email，…}=this.state
。但这与我的答案中的代码无关，因为我在示例中没有使用任何解构。
emailjs.send(...)
.then(() => this.setState({ sent: true }))
.catch(() => this.setState({ error: true}))