Текстовые поля MaterialUI выходят из центра при отображении нового <p>текста </p> - PullRequest
Новая
       123

Текстовые поля MaterialUI выходят из центра при отображении нового <p>текста </p>

0 голосов
/ 06 августа 2020

У меня есть страница входа с текстовыми полями для имени пользователя и пароля. Если пользователь пытается войти в систему с неверными данными, я показываю сообщение об ошибке, в котором указывается, что имя пользователя или пароль недействительны. Когда отображается это сообщение об ошибке, мои текстовые поля, которые ранее были отцентрованы, перемещаются влево.

Я сохраняю свойство error в состоянии. Когда пользователь нажимает кнопку отправки, если есть ошибка, она устанавливается в состояние.

У меня есть функция displayError следующим образом 

displayError = (error) => {
    if (!error.length) return null;
    return (<p>{error}</p>);
}

Я вызываю ее в функции рендеринга. Состояние ошибки отображается на странице. 

<Grid item align="center">
     {this.displayError(this.state.error)}
</Grid>

Полный код 


export class MainLogin extends Component {

  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
      error: '',
    }

    this.handleChange = this.handleChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  handleChange = ({ target }) => {
    const { name, value } = target;
    this.setState({ [name]: value });
  }

  submit = async (e) => {
    e.preventDefault();

    Sign in logic ...

    if (//SignInSuccessful) {
      // Do some things
    } else {
      // Update and display error
      this.setState({ error: "Incorrect email or password. Please try again." })
    }
  }

  displayError = (error) => {
    if (!error.length) return null;
    return (<p>{error}</p>);
  }




  render() {
    


    return (
      <div>
        <Grid container direction="column" alignItems="center" justify="center">
          <Grid item align="center">
            <div className="a"><p>{message}</p></div>
          </Grid>
          <Grid item align="center">
            <img src={logo} alt="Rolling Insights" className="logo" />
          </Grid>
            <form>

              <Grid item>
                <TextField
                  label="E-Mail"
                  name="email"
                  variant="outlined"
                  margin="normal"
                  onChange={this.handleChange}
                />
              </Grid>

              <Grid item>
                <TextField
                  label="Password"
                  name="password"
                  variant="outlined"
                  margin="normal"
                  type="password"
                  onChange={this.handleChange}
                />
              </Grid>

              <Grid item align="center">
                {this.displayError(this.state.error)}
              </Grid>

              <Box m={2} pt={3}>
                <Grid item align="center">
                  <Button
                    variant="contained"
                    color="primary"
                    margin="normal"
                    onClick={this.submit}
                  >
                    Log In
                  </Button>
                </Grid>
              </Box>

            </form>
        </Grid>
      </div>
    )
  }
}

export default MainLogin;

До ошибки

Before Error

After Error

После ошибки

Спасибо за ваше время

1 Ответ

0 голосов
/ 06 августа 2020

Возможно, вам стоит удалить тег <from> или добавить в тег <Grid container direction="column" alignItems="center" justify="center">. 

     <form>
       <Grid container direction="column" alignItems="center" justify="center">

        ......

        </Grid>
     </form>
...