0

我想更改标签文本的字体大小,但找不到正确的方法。下面给出的代码只是我想要做的一个例子。我想要更改电子邮件标签的文本大小。任何帮助,将不胜感激。提前致谢。

import React from 'react';
import Button from '@material-ui/core/Button';
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';

export default class OnBlurExample extends React.Component {
    state = {
        formData: {
            email: '',
        },
        submitted: false,
    }

    emailRef = React.createRef();

    handleChange = (event) => {
        const { formData } = this.state;
        formData[event.target.name] = event.target.value;
        this.setState({ formData });
    }

    handleBlur = (event) => {
        this.emailRef.current.validate(event.target.value);
    }

    handleSubmit = () => {
        this.setState({ submitted: true }, () => {
            setTimeout(() => this.setState({ submitted: false }), 5000);
        });
    }

    render() {
        const { formData, submitted } = this.state;
        return (
            <ValidatorForm
                onSubmit={this.handleSubmit}
                instantValidate={false}
            >
                <h2>OnBlur</h2>
                <TextValidator
                    ref={this.emailRef}
                    label="Email"
                    onBlur={this.handleBlur}
                    onChange={this.handleChange}
                    name="email"
                    value={formData.email}
                    validators={['required', 'isEmail']}
                    errorMessages={['this field is required', 'email is not valid']}
                />
                <br />
                <Button
                    color="primary"
                    variant="contained"
                    type="submit"
                    disabled={submitted}
                >
                    {
                        (submitted && 'Your form is submitted!')
                        || (!submitted && 'Submit')
                    }
                </Button>
            </ValidatorForm>
        );
    }
}
4

0 回答 0