终于设法设置了Emailjs之后,我现在正尝试使用Material UI文本字段(https://material-ui.com/components/text-fields/#text-field)进行更好的设计。
[不幸的是,我无法将Material UI类添加到我的代码中,因为我无法将类更改为具有状态的功能组件。有谁知道如何将类更改为函数,以便可以将材料UI设计用于联系表单?
我的EmailJS表单(工作正常,只在更改其用户名和模板ID后才在此处发布):
import React, { Component } from 'react'
import * as emailjs from 'emailjs-com'
import { Button, FormFeedback, Form, FormGroup, Label, Input } from 'reactstrap'
class ContactForm extends Component {
state = {
name: '',
email: '',
subject: '',
message: '',
}
handleSubmit(e) {
e.preventDefault()
const { name, email, subject, message } = this.state
let templateParams = {
from_name: email,
to_name: 'Altes Waschhaus',
subject: subject,
message_html: message,
}
emailjs.send(
'gmail',
'template_XXXXX',
templateParams,
'user_XXXXX'
)
this.resetForm()
}
resetForm() {
this.setState({
name: '',
email: '',
subject: '',
message: '',
})
}
handleChange = (param, e) => {
this.setState({ [param]: e.target.value })
}
render() {
return (
<>
<h1 className="p-heading1">Get in Touch</h1>
<Form onSubmit={this.handleSubmit.bind(this)}>
<FormGroup controlId="formBasicEmail">
<Label className="text-muted">Email address</Label>
<Input
type="email"
name="email"
value={this.state.email}
className="text-primary"
onChange={this.handleChange.bind(this, 'email')}
placeholder="Enter email"
/>
</FormGroup>
<FormGroup controlId="formBasicName">
<Label className="text-muted">Name</Label>
<Input
type="text"
name="name"
value={this.state.name}
className="text-primary"
onChange={this.handleChange.bind(this, 'name')}
placeholder="Name"
/>
</FormGroup>
<FormGroup controlId="formBasicSubject">
<Label className="text-muted">Subject</Label>
<Input
type="text"
name="subject"
className="text-primary"
value={this.state.subject}
onChange={this.handleChange.bind(this, 'subject')}
placeholder="Subject"
/>
</FormGroup>
<FormGroup controlId="formBasicMessage">
<Label className="text-muted">Message</Label>
<Input
type="textarea"
name="message"
className="text-primary"
value={this.state.message}
onChange={this.handleChange.bind(this, 'message')}
/>
</FormGroup>
<Button variant="primary" type="submit" value="Send">
Submit
</Button>
</Form>
</>
)
}
}
export default ContactForm
您不必只使用基于功能的组件来使用材料ui。
您仍然可以使用基于类的组件,并使用withStyles来使用这些类。
代码段
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
//etc...
},
};
class ContactForm extends Component {
state = {
name: '',
email: '',
subject: '',
message: '',
}
...
render() {
const { classes } = this.props; //<----- grab classes here in the props
return (
<>
<h1 className="p-heading1">Get in Touch</h1>
<Form onSubmit={this.handleSubmit.bind(this)}>
<FormGroup controlId="formBasicEmail">
<Label className="text-muted">Email address</Label>
<Input
type="email"
name="email"
value={this.state.email}
className="text-primary"
onChange={this.handleChange.bind(this, 'email')}
placeholder="Enter email"
/>
</FormGroup>
....
</>
)
}
}
export default withStyles(styles)(ContactForm) //<----- see here