使用 react 和 material ui 更改文本字段中 required 的标签答案

【问题标题】：Changing the label of required in text-field with react and material ui使用 react 和 material ui 更改文本字段中 required 的标签
【发布时间】：2020-04-30 22:12:31
【问题描述】：

我在反应应用程序中使用 Material-UI。我要做的是在设置所需属性时更改文本字段的标签“请填写此字段”。

我尝试将setCustomValidity 与inputProps 一起使用，但没有任何反应。此标签有两种类型。一个是当鼠标悬停在文本字段上时出现的工具提示，另一个是当我们提交表单时出现的。

【问题讨论】：

标签： reactjs material-ui textfield

【解决方案1】：

您收到的错误消息不是 material-ui，而是处理错误的浏览器。这无法更改，因为浏览器根据“必需”属性呈现它。您只能通过对表单进行自定义错误处理来更改此设置。

【讨论】：

可以使用输入元素中的setCustomValidity 方法更改消息。但是我不能用 Material-UI 的 tex-field 来改变它。

【解决方案2】：

这是我在个人项目中使用的代码sn-p：

<TextField
               error={this.props.error_val
                    ? true
                    : false
                }
                required={this.props.isRequired ? true : false}
                type={this.props.type}
                label={this.props.label}
                variant={this.props.VARIANT}
                className={classes.root}
/>

您可以使用required和error属性组合来决定输入是否被填充。

其次，您可以编写一个validate()，它基本上是一个switch 语句，您将在其中传递“标签名称”、“值”并将返回值放入您的<TextField/> 组件中。

片段：

    validate = (name, value) => {
        let error = "";
        switch (name) {
          case "name":
            error = (!value || value.length == 0) && "Please enter the name";
            break;
    }
            return error;
}

【讨论】：

这不是我遇到的问题，我在问题中提到的标签是您为文本字段设置所需属性时将出现的标签，而不是属于material ui text-field prop.