时间戳

首页 > 解决方案 > 必需的属性和类型电子邮件不起作用。ReactJS 和 Materia UI

reactjs - 必需的属性和类型电子邮件不起作用。ReactJS 和 Materia UI

问题描述

我是 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

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

标签： reactjsmaterial-uijsx

解决方案

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

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>
        );
    }
}

这是代码沙箱

推荐阅读