Question

我已将实质性ui错误消息显示添加到我的文本字段中，如果我单击按钮时未在文本字段中键入任何文本，则会显示一条错误消息，此消息将按下按钮，我要阻止了我，我找不到解决办法

这是我的表单代码。

                            <Grid container  justify='center' alignContent='center'  >
                                <Grid item xs={12}   >

                                    <TextField

                                        id="outlined-full-width"
                                        label="Input"
                                        style={{  width:'100%',marginTop:30 }}
                                        placeholder="Add A Todo Item "

                                        margin="normal"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}

                                        error={this.state.errorState }
                                        helperText={
                                            this.state.errorState && "Item name can't be blank"


                                        }
                                        size="large"
                                        variant="outlined"
                                        value={newItem}
                                        onChange={handleInput}




                                    />

                                </Grid>

                            </Grid>
                            <CardActions>
                            <Grid container  justify='center' alignContent='center'  >
                                <Grid item xs={12} md={6}  >

                                  <Button
                    type="submit"
                    variant="contained"
                    color='inherit'
                    fontsize='inherit'
                    style={styles.add}
                    startIcon={<AddIcon/>}

                >
                    Add Item
                </Button>

                                </Grid>

                            </Grid>

                            </CardActions>




                            </form>

Answer 1

在您的主题中，添加这些规则，以便 helperText / 错误文本保持在您的字段的边距内。这将防止文本下推下面的内容。

const theme = createMuiTheme({
  // ...
  MuiFormHelperText: {
    root: {
      // Use existing space / prevents shifting content below field
      marginTop: 0,
      height: 0,
    },
  }
})

Answer 2

根据docs of material ui，您需要将错误处理放入单独的文本字段中以输出错误。

 <TextField error id="standard-error" label="Error" defaultValue="Hello World" />
        <TextField
          error
          id="standard-error-helper-text"
          label="Error"
          defaultValue="Hello World"
          helperText="Incorrect entry."
        />

显示textField错误消息时，材质UI按钮向下移动

2 个答案: