Изменение метки обязательного в текстовом поле с помощью интерфейса и материала

Question

Я использую Material-UI в приложении реакции. Я пытаюсь изменить метку «Пожалуйста, заполните это поле» текстового поля, когда мы задаем обязательный атрибут.

Я пытался использовать setCustomValidity с inputProps, но ничего не происходит , Есть два типа этого ярлыка. Один из них - всплывающая подсказка, которая появляется, когда мышь находится над текстовым полем, а другая - когда мы отправляем форму.

Answer 1

Вот фрагмент кода, который я использовал в моем личном проекте:

<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;
}

Answer 2

Полученное сообщение об ошибке - не материал-пользовательский интерфейс, а браузер, обрабатывающий ошибку. Это не может быть изменено, так как браузер отображает это на основе атрибута «required». Вы можете изменить это, только выполнив пользовательскую обработку ошибок в вашей форме.