我有一个登录页面的用户名和密码的文本字段。如果用户试图使用不正确的数据登录，我会显示一条错误消息，告诉他们用户名或密码无效。显示此错误消息时，先前居中的文本字段将向左移动。
我在状态中保留了一个错误属性。当用户按下提交时，如果出现错误，则将其设置为状态。
我有一个函数displayError如下

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

我在render函数中调用它。当错误处于状态时，它将呈现在页面上。

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

错误前

错误后

谢谢你的时间