Показать уведомление в парсере

У меня есть фильтр для телефонных номеров, как здесь:

const UserFilter = (props: any) => <Filter {...props}>
    <TextInput label = "Mobile" source = "mobile" alwaysOn resettable parse = {phoneParser} />
    <TextInput label = "E-Mail" source = "email" alwaysOn resettable />
</Filter>

И я использую парсер, чтобы заменить ведущие нули фиксированным кодом страны:

const phoneParser = (value: string) => {
    const needsCountryCode = value.charAt(0)= = "0"
    if (needsCountryCode) {
        showNotification(`Mobile number reformatted with country code of Switzerland.`,'warning')
    }
    return needsCountryCode ? "+41"+value.substring(1):value;
};

Теперь я хотел уведомлять пользователя каждый раз, когда происходит эта замена (обычно это происходит только один раз). Я пытался использовать хук useNotify, но это не функциональный компонент, а затем я попробовал функцию showNotification, но она ничего не делает. Возможно ли это вообще в функции парсера?

react-admin

18.03.2022 12:23

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я предлагаю вам создать собственный ввод для этого. Что-то вроде этого:

import { FieldTitle, InputHelperText, ResettableTextField, useNotify, useInput } from "react-admin";

const hasCountryCode = (value) => value.charAt(0) === "0";
const addCountryCode = (value) => "+41" + value.substring(1);

export const PhoneInput = (props) => {
    const { helperText, label, source, resource, ...restProps } = props;
    const {
      input: { name, onChange, ...rest },
      meta: { error, submitError, touched },
      isRequired,
    } = useInput(props);
    const notify = useNotify();

    const handleChangeEvent = (event) => {
        const value = event.target.value;
        if (hasCountryCode(value)) {
            onChange(value);
        } else {
            notify(
                `Mobile number reformatted with country code of Switzerland.`,
                { type: "warning" }
            );
            onChange(addCountryCode(value));
        }
    };
    
    return (
      <ResettableTextField
        name = {name}
        onChange = {handleChangeEvent}
        label = {
          label !== "" &&
          label !== false && (
            <FieldTitle
              label = {label}
              source = {source}
              resource = {resource}
              isRequired = {isRequired}
            />
          )
        }
        error = {!!(touched && (error || submitError))}
        helperText = {
          <InputHelperText
            touched = {touched}
            error = {error || submitError}
            helperText = {helperText}
          />
        }
        {...rest}
        {...restProps}
      />
    );
};

Спасибо! Однако мне пришлось сделать две небольшие поправки: условие hasCountryCode является логической противоположностью. Также перед обращением к event.target.value я проверил, если event.target не является undefined (и если это undefined я звоню onChange(""), чтобы сработал сброс). Спасибо!

— 21.03.2022 15:22

18.03.2022 14:51