必需的属性和类型电子邮件不起作用。 React JS 和 Material UI答案

【问题标题】：Required attribute and type email dows not work. ReactJS and Materia UI必需的属性和类型电子邮件不起作用。 React JS 和 Material UI
【发布时间】：2020-09-18 04:22:22
【问题描述】：

我是 ReactJS 和 Material-UI 的新手，我正在尝试构建一个普通表单只是为了好玩，但有些属性不起作用，我真的不明白为什么

代码如下：

import React, { Component } from 'react';import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import InputAdornment from '@material-ui/core/InputAdornment';
import FormControl from '@material-ui/core/FormControl';
import AccountCircle from '@material-ui/icons/AccountCircle';
import LockIcon from '@material-ui/icons/Lock';
import EmailIcon from '@material-ui/icons/Email';
import PaymentIcon from '@material-ui/icons/Payment';
import TodayIcon from '@material-ui/icons/Today';
import moduleName from '@material-ui/core/';

export class FormOpzioniPagamento extends Component {

    continue = e =>{
        e.preventDefault();
        this.props.nextStep();
    };
    render() {
        const {values,handleChange}=this.props;
        return (
            <div align="center">
            <Avatar alt="Remy Sharp" src="https://i1.rgstatic.net/ii/profile.image/363082749628419-1463577081575_Q512/Rosario_Sorbello2.jpg" align="center"/>
            <FormControl>
            <FormControl required>
                <InputLabel htmlFor="input-with-icon-adornment" color="secondary">Nome</InputLabel>
                <Input
                required
                id="input-with-icon-adornment"
                color="secondary"
                startAdornment={
                    <InputAdornment position="start">
                    <AccountCircle />
                    </InputAdornment>
                }
                onChange={handleChange('nome')}
                /></FormControl>
               </div>
export default FormOpzioniPagamento

它只是让我继续没有任何问题

【问题讨论】：

“不起作用”不足以描述问题。您应该提供您使用的代码，告诉我们您的期望，并根据您在页面或控制台中看到的数据告诉我们您真正得到了什么
我按继续并没有显示任何错误消息。我只想要一个像 HTML5 normal 的弹出消息

标签： reactjs material-ui jsx

【解决方案1】：

您提供的代码是错误代码。请试试这个例子：

import InputAdornment from '@material-ui/core/InputAdornment';
import FormControl from '@material-ui/core/FormControl';
import AccountCircle from '@material-ui/icons/AccountCircle';
import LockIcon from '@material-ui/icons/Lock';
import EmailIcon from '@material-ui/icons/Email';
import PaymentIcon from '@material-ui/icons/Payment';
import TodayIcon from '@material-ui/icons/Today';
import Avatar from "@material-ui/core/Avatar";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
import React from "react";
import Button from "@material-ui/core/Button";

export default class FormExample extends React.Component {

    nextStep = () => {
        alert('nextStep is called');
    };
    handleChange = (message) => {
        alert('handleChange is called. The parameter is: ' + message);
    };

    render() {
        return (
            <div>
                <FormOpzioniPagamento nextStep={this.nextStep} handleChange={this.handleChange}/>
            </div>
        );
    }
}

class FormOpzioniPagamento extends React.Component {

    continue = e => {
        e.preventDefault();
        this.props.nextStep();
    };

    render() {
        const {values, handleChange} = this.props;
        return (
            <div align="center">
                <Avatar alt="Remy Sharp"
                        src="https://i1.rgstatic.net/ii/profile.image/363082749628419-1463577081575_Q512/Rosario_Sorbello2.jpg"
                        align="center"/>
                <FormControl required>
                    <InputLabel htmlFor="input-with-icon-adornment" color="secondary">Nome</InputLabel>
                    <Input
                        required
                        id="input-with-icon-adornment"
                        color="secondary"
                        startAdornment={
                            <InputAdornment position="start">
                                <AccountCircle/>
                            </InputAdornment>
                        }
                        onChange={handleChange('nome')}
                    />
                    <Button color={"primary"} onClick={()=>{handleChange('submit') }}>Submit</Button>
                </FormControl>
            </div>
        );
    }
}

Here is the Code Sandbox

【讨论】：