亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用材料UI和反應JS進行表單提交和驗證

使用材料UI和反應JS進行表單提交和驗證

撒科打諢 2022-09-29 17:49:35
我正在從 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}                >
查看完整描述

3 回答

?
莫回無

TA貢獻1865條經驗 獲得超7個贊

你可以試試：


...


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>

  );

}


查看完整回答
反對 回復 2022-09-29
?
手掌心

TA貢獻1942條經驗 獲得超3個贊

我們可以通過在提交時添加阻止默認值來實現此目的。


句柄提交：


const handleSubmit = e => {

    e.preventDefault();

    console.log("submit");

};

上提交：


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

檢查代碼和框中的更新代碼


查看完整回答
反對 回復 2022-09-29
?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

注冊卡導入從“反應”中反應;


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)


查看完整回答
反對 回復 2022-09-29
  • 3 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號