使用材料UI和反应JS进行表单提交和验证

Question

我正在从 AntD 迁移到 MaterialUI，不知道如何在不重新加载整个页面的情况下轻松实现表单验证和表单提交。例如，单击“登录”后，整个页面将重新加载，这对于SPA应用程序来说不是一个好主意。我可以绕过它，将句柄函数从元素移动到元素的onClick函数，并从按钮中删除type=“submit”，以免重新加载整个页面。这有效，但它删除了验证，并删除了用户单击“Enter”提交表单的功能。任何想法如何实现这一点？以下是我到目前为止所做的工作，但没有表单验证，也无法单击“输入”以提交表单：    return (    <Container component="main" maxWidth="xs">        <CssBaseline/>        <div className={classes.paper}>            <Avatar className={classes.avatar}>                <LockOutlinedIcon/>            </Avatar>            <Typography component="h1" variant="h5">                Sign in            </Typography>            <form className={classes.form}>                <TextField                    variant="outlined"                    margin="normal"                    required                    fullWidth                    id="email"                    label="Email Address"                    name="email"                    autoComplete="email"                    autoFocus                    errorMessages={['this field is required', 'email is not valid']}                    onInput={e => setEmail(e.target.value)}                />                <TextField                    variant="outlined"                    margin="normal"                    required                    fullWidth                    name="password"                    label="Password"                    type="password"                    id="password"                    autoComplete="current-password"                    onInput={e => setPassword(e.target.value)}                />                <FormControlLabel                    control={<Checkbox value="remember" color="primary"/>}                    label="Remember me"                />                <Button                    fullWidth                    variant="contained"                    color="primary"                    className={classes.submit}                    onClick={onFinish}                >

Answer 1

你可以试试：

...

export default function SignIn() {

  ...

  const [email, setEmail] = React.useState("");

  const [password, setPassword] = React.useState("");

  const [emailErrorText, setEmailErrorText] = React.useState("");

  const [passwordErrorText, setPasswordErrorText] = React.useState("");

  const onSubmit = e => {

    e.preventDefault();

    

    if (!email) {

      setEmailErrorText("Please enter email");

    } else {

      setEmailErrorText("");

    }

    if (!password) {

      setPasswordErrorText("Please enter password");

    } else {

      setPasswordErrorText("");

    }

  };

  return (

    <Container component="main" maxWidth="xs">

      <CssBaseline />

      <div className={classes.paper}>

        <Typography component="h1" variant="h5">

          Sign in

        </Typography>

        <form className={classes.form} noValidate>

          <TextField

            variant="outlined"

            margin="normal"

            required

            type="email"

            fullWidth

            id="email"

            label="Email Address"

            name="email"

            autoComplete="email"

            autoFocus

            value={email}

            error={!!emailErrorText}

            helperText={emailErrorText}

            onChange={e => setEmail(e.target.value)}

          />

          <TextField

            variant="outlined"

            margin="normal"

            required

            fullWidth

            name="password"

            label="Password"

            type="password"

            id="password"

            autoComplete="current-password"

            value={password}

            error={!!passwordErrorText}

            helperText={passwordErrorText}

            onChange={e => setPassword(e.target.value)}

          />

          <FormControlLabel

            control={<Checkbox value="remember" color="primary" />}

            label="Remember me"

          />

          <Button

            type="submit"

            fullWidth

            variant="contained"

            color="primary"

            className={classes.submit}

            onClick={onSubmit}

          >

            Sign In

          </Button>

          <Grid container>

            <Grid item xs>

              <Link href="#" variant="body2">

                Forgot password?

              </Link>

            </Grid>

            <Grid item>

              <Link href="#" variant="body2">

                {"Don't have an account? Sign Up"}

              </Link>

            </Grid>

          </Grid>

        </form>

      </div>

      <Box mt={8}>

        <Copyright />

      </Box>

    </Container>

  );

}

Answer 2

我们可以通过在提交时添加阻止默认值来实现此目的。

句柄提交：

const handleSubmit = e => {

    e.preventDefault();

    console.log("submit");

};

上提交：

<form className={classes.form} noValidate onSubmit={handleSubmit}>

检查代码和框中的更新代码

Answer 3

注册卡导入从“反应”中反应;

import { withRouter } from 'react-router-dom'

import { Grid, Paper, Avatar, TextField, Button } from '@material-ui/core'

class Register extends React.Component {

  state = { username: "", password: "", confirmPassword: "", location: "", phonenumber: "", email: "" };

  handleClickSignIn()

    {

      this.props.history.push("/Login");

    }

  validateEmail() {

    console.log("Validate Email fun enter")

    // var re = /\S+@\S+\.\S+/;

    // return re.test(email);

    if (this.state.email === "") {

      alert("Plsease Enter Validate number");

    }

  }

  validateNumber() {

    if (this.state.phonenumber < 10) { alert("Please enter your phone number"); }

  }

  validateUsername() {

    if (this.state.username === "") {

      alert("Please Enter username");

      return false

    }

  }

  validatePassword() {

    if (this.state.password < 6) { alert("Password must be at least 6 characters long."); }

  }

  validateLocation() {

    if (this.state.location ==="") { alert("Please enter your location "); }

  }

  onSubmit() {

    // this.validateUsername();

    var un = this.validateUsername();

    if (un ===false) {

      return

    }

    // this.validatePassword();

    // this.validateEmail();

    // this.validateNumber();

    // this.validateLocation();

    console.log(this.state.username, this.state.password);

    console.log(this.state.email);

    console.log(this.state.confirmPassword);

    console.log(this.state.location);

    console.log(this.state.phonenumber);

  }

  render() {

    const paperstyle = { padding: 30, height:'100', width: 350, margin: '20px auto' }

    const avatarStyle = { backgroundColor: '#00adb5' }

    const headerstyle = { margin: '10px 0' }

    const btstyle = { margin: '10px 0'  }

    const ttstyle={margin:'5px 0'}

   // const FormControlLabel = {fontSize:'5'}

    return (

      

      <Grid align='center' container

      spacing={0}

      direction="column"

      alignItems="center"

      justify="center"

      style={{ minHeight: '100vh' }}>

        <Paper elevation={10} style={paperstyle}>

          <Avatar style={avatarStyle}  > G</Avatar>

          <h1 style={headerstyle}>GILGAL</h1>

          <h2>Get Started Now</h2>

          <TextField label='Name'  fullWidth required style={ttstyle}

            onChange={event => {

                this.setState({username: event.target.value })

              }}

          />

          <TextField fullWidth label='Email '  style={ttstyle}

            onChange={

              event => {

                this.setState

                  (

                    {

                      email: event.target.value

                    })

              }} />

          <TextField label='Password'  type='password' fullWidth required  style={ttstyle}

            onChange={

              event => { this.setState({ password: event.target.value }) }

            }

          />

          <TextField label='Confirm Password' type='password' fullWidth required style={ttstyle}

            onChange={

              event => { this.setState({ confirmPassword: event.target.value }) }

            }

          />

          <TextField label='Phonenumber'  fullWidth required  style={ttstyle}

            onChange={

              event => { this.setState({ phonenumber: event.target.value }) }

            }

          />

          <TextField label='Location' fullWidth  style={ttstyle}

            onChange={

              event => { this.setState({ location: event.target.value }) }

            }

          />

         <input type="checkbox" id="agree" style={btstyle}  /><label htmlFor="agree"> I agree to the website's <b>Privacy Policy & Terms and condition</b></label>

        

          <Button  type='submit' onClick={this.onSubmit.bind(this)} color='primary' variant="contained" fullWidth  style={btstyle}>Register</Button>

       <div><p >  Already have an acount?

         < a href onClick={this.handleClickSignIn.bind(this)} >Log in</a>

         </p></div>

        </Paper>

      </Grid>

      

    );

   

  }

}

export default withRouter(Register)