代码之家  ›  专栏  ›  技术社区  ›  Bug Miser

如何在MUI输入字段上显示不同的错误消息?

  •  0
  • Bug Miser  · 技术社区  · 2 年前

    我有一个表单输入字段,如果用户试图在空时提交,它会显示一个错误,但我还想显示另一个错误消息,即输入不是唯一的,我目前有这个错误

    <FormTextField
        className={classes.nameInput}
        errorMessages={[handleErrorMessage()]}
        label="Recipe Name"
        id="recipe-name"
        isRequired
        name="name"
        onChange={handleChange}
        placeholder="Recipe name"
        validators={['required']}
        value={slug}
        autoFocus
    />
    

    这是MUI v4

    0 回复  |  直到 2 年前
        1
  •  0
  •   Hiba Youssef    2 年前

    第一个解决方案:

    您可以使用物料ui文档中的snackbar:

    https://v4.mui.com/components/snackbars/
    

    你可以放一条或多条信息

    第二个解决方案:

    也许这篇文章会对你有所帮助,它非常接近你的问题:

    https://stackoverflow.com/questions/49421792/how-to-use-material-uinext-textfield-error-props
    

    你可以这样说:

    <TextField
      value={this.state.text}
      onChange={event => this.setState({ text: event.target.value })}
      error={text === ""}
      helperText={text === "" ? 'Empty field!' : ' '}
    />