javascript - 如何将我的 React 类更改为一个函数,以便我可以包含 Material UI 类?
问题描述
在最终设法设置 Emailjs 之后,我现在尝试使用 Material UI 文本字段 ( https://material-ui.com/components/text-fields/#text-field ) 进行更好的设计。
不幸的是,我无法将 Material UI 类添加到我的代码中,因为我无法将类更改为具有状态的功能组件。有谁知道如何将类更改为函数,以便我可以将 Material 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
推荐阅读
- python - FastAPI通过TestClient在get请求中传递json
- asp.net-core - OAuth .NET Core - 使用自定义选项登录后进行许多重定向 - 多租户
- amazon-web-services - 如何为 aws EKS 上的 nodePort 添加规则以允许某些端口范围内的流量?
- react-native - 带有 onLongPress 回调的 FlatList
- api - 我怎样才能接受人类口音(Wavenet 或 Ssml 声音)?
- python - 饼状图上的参数 Matplotlib、百分比大小、颜色
- angular - 如果地址字段为空,如何将地址添加为不适用。否则显示为地址
- haskell - 过滤代数数据类型列表
- sql - 用于打印 n 行的 SQL 查询
- debian - Opam init - 求解器失败(Debian)