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

Question

我有一个表单输入字段，如果用户尝试在空时提交，则显示错误，但我也想显示不同的错误消息，即输入不是唯一的，我目前有这个

<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

Answer 1

第一种解决方案:

您可以使用材料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!' : ' '}
/>