170 похожих чатов

Задачка: изменить так чтобы мой код не отправлял запросы на

сервер а сразу после ввода кода показывал следующую страницу

const AuthCode: FC<StateProps> = ({
authPhoneNumber,
authIsCodeViaApp,
authIsLoading,
authError,
}) => {
const {
setAuthCode,
returnToAuthPhoneNumber,
clearAuthError,
} = getActions();

const lang = useLang();
// eslint-disable-next-line no-null/no-null
const inputRef = useRef<HTMLInputElement>(null);

const [code, setCode] = useState<string>('');
const [isTracking, setIsTracking] = useState(false);
const [trackingDirection, setTrackingDirection] = useState(1);

useEffect(() => {
if (!IS_TOUCH_ENV) {
inputRef.current!.focus();
}
}, []);

useHistoryBack({
isActive: true,
onBack: returnToAuthPhoneNumber,
});

const onCodeChange = useCallback((e: FormEvent<HTMLInputElement>) => {
if (authError) {
clearAuthError();
}

const { currentTarget: target } = e;
target.value = target.value.replace(/[^\d]+/, '').substr(0, CODE_LENGTH);

if (target.value === code) {
return;
}

setCode(target.value);

if (!isTracking) {
setIsTracking(true);
} else if (!target.value.length) {
setIsTracking(false);
}

if (code && code.length > target.value.length) {
setTrackingDirection(-1);
} else {
setTrackingDirection(1);
}

if (target.value.length === CODE_LENGTH) {
setAuthCode({ code: target.value });
}
}, [authError, clearAuthError, code, isTracking, setAuthCode]);

function handleReturnToAuthPhoneNumber() {
returnToAuthPhoneNumber();
}

return (
<div id="auth-code-form" className="custom-scroll">
<div className="auth-form">
<TrackingMonkey
code={code}
codeLength={CODE_LENGTH}
isTracking={isTracking}
trackingDirection={trackingDirection}
/>
<h1>
{authPhoneNumber}
<div
className="auth-number-edit"
onClick={handleReturnToAuthPhoneNumber}
role="button"
tabIndex={0}
title={lang('WrongNumber')}
>
<i className="icon-edit" />
</div>
</h1>
<p className="note">
{renderText(lang(authIsCodeViaApp ? 'SentAppCode' : 'Login.JustSentSms'), ['simple_markdown'])}
</p>
<InputText
ref={inputRef}
id="sign-in-code"
label={lang('Code')}
onInput={onCodeChange}
value={code}
error={authError && lang(authError)}
autoComplete="off"
inputMode="numeric"
/>
{authIsLoading && <Loading />}
</div>
</div>
);
};

export default memo(withGlobal(
(global): StateProps => pick(global, ['authPhoneNumber', 'authIsCodeViaApp', 'authIsLoading', 'authError']),
)(AuthCode));

2 ответов

29 просмотров

Спроси в чате реакт

Похожие вопросы

Обсуждают сегодня

Господа, а что сейчас вообще с рынком труда на делфи происходит? Какова ситуация?
Rꙮman Yankꙮvsky
29
А вообще, что может смущать в самой Julia - бы сказал, что нет единого стандартного подхода по многим моментам, поэтому многое выглядит как "хаки" и произвол. Короче говоря, с...
Viktor G.
2
30500 за редактор? )
Владимир
47
а через ESC-код ?
Alexey Kulakov
29
Чёт не понял, я ж правильной функцией воспользовался чтобы вывести отладочную информацию? но что-то она не ловится
notme
18
У меня есть функция где происходит это: write_bit(buffer, 1); write_bit(buffer, 0); write_bit(buffer, 1); write_bit(buffer, 1); write_bit(buffer, 1); w...
~
14
Добрый день! Скажите пожалуйста, а какие программы вы бы рекомендовали написать для того, чтобы научиться управлять памятью? Можно написать динамический массив, можно связный ...
Филипп
7
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
Ребят в СИ можно реализовать ООП?
Николай
33
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Карта сайта