javascript - innerHTML 没有出现

Question

我试图收到一条错误消息，如果用户输入的用户名或密码错误，则会在登录框下方弹出一条消息，说明他们输入错误。但由于某种原因，它没有出现。有谁知道为什么？

这是我的代码

const onSubmit = (event) => {
     event.preventDefault()
      apiClient.signIn(username, password) .then( (response) => {
        console.log(response)

        if (response === 'Logged In') {          
        return <Redirect to='/forum' />
      }
       else {
         return document.getElementById('error').innerHTML="Wrong Username or Password"
       }
      })

      .catch(error => {
        console.log('Error found when creating meeting');
      })

      
    }
    
       
      return (
        <section class="index-banner">
          <ThemeProvider theme={theme}>
            <Grid container style = {{minHeight: '100vh'}} spacing={0}  direction="column"  alignItems="center">
              <Grid item xs={12} sm={12}>

                <div className = "title-2">Sign In</div>
                <div>
                  <FormControl margin = "normal">
                    <TextField label="Username" value = {username} onChange={e => { getUser(e.target.value) }} spacing={4} />    
                    <TextField label="Password" value = {password} onChange={e => { getPass(e.target.value) }} spacing={4}/>
                   
                  </FormControl>
                </div>                 
                <Grid item xs={12} sm={12}>
                  <Button onClick={onSubmit} variant="contained" component="span" spacing={4} color = "secondary">
                    Sign In
                  </Button>
               </Grid> 
               <Grid item xs={12} sm={12}>
                  <Button component = {Link} to = "/" spacing={4} color = "primary">
                     Create Account
                  </Button>
                   <div className="error"></div>
               </Grid>
              </Grid>
            </Grid>
          </ThemeProvider>      
        </section>         
      )      

标签： javascriptreactjsmaterial-ui

Answer 1

value仅用于或形成诸如input或textarea等之类的元素...

else 语句应该是innerHTMLor textContent：

. . .
else {
  return document.getElementById('error').textContent = "Wrong Username or Password"
}
. . .

或者

. . .
else {
  return document.getElementById('error').innerHTML = "Wrong Username or Password"
}
. . .