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

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

material-ui reactjs

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 年前

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!' : ' '}
/>

推荐文章