如何将我的 React 类更改为一个函数，以便我可以包含 Material UI 类？

Question

在终于成功设置 Emailjs 之后，我现在尝试使用 Material UI 文本字段 (https://material-ui.com/components/text-fields/#text-field) 来进行更好的设计。

不幸的是，我无法将 Material UI 类添加到我的代码中，因为我无法将 Class 更改为具有状态的功能组件。有谁知道如何将类更改为函数，以便我可以将 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

Answer 1

您不一定需要仅使用基于功能的组件来使用材质 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