Форма без библиотек

Сначала опись. Всё, на чём держалась форма в статьях части II «Отправка формы и событие submit» и «Встроенная валидация и своя», на телефоне либо исчезает, либо переходит к вашему коду:

Начнём со строки про клавишу ввода. Её подпись на экранной клавиатуре задаёт свойство returnKeyType: "next" — «Далее», "done" — «Готово», "send" — «Отправить». Эти три вместе с "go" и "search" есть на обеих платформах, а у iOS и Android есть ещё и свои. Рядом — более новое enterKeyHint со значениями одноимённого атрибута HTML, и если заданы оба, главнее оно: та же пара, что keyboardType и inputMode в прошлой статье. Нажатие клавиши приходит в onSubmitEditing, текст поля — в e.nativeEvent.text, как у onChange. autoFocus ставит курсор в поле, как только оно появилось: форму открыли — клавиатура уже поднята под вес.

Клавиатуры в песочнице нет, поэтому клавишу жмёт помощник pressReturn(testID) из подложки: он шлёт полю Enter, а react-native-web превращает его в onSubmitEditing. Там же — fieldKinds, parseAmount и inspectField из прошлой статьи; последний теперь читает ещё и подпись клавиши. Прогноз: у веса стоит returnKeyType="next". Что напечатается и попадёт ли фокус в повторы?

declare const fieldKinds: Record<"weight" | "reps", import("react-native").TextInputProps>;
declare function pressReturn(testID: string): void;
declare function inspectField(testID: string): { enterKeyHint: string | null };
let ушёлВес = false;
const { View, TextInput } = ReactNative;

function SetForm() {
  const [weight, setWeight] = React.useState("");
  const [reps, setReps] = React.useState("");
  return (
    <View style={{ gap: 8 }}>
      <TextInput
        {...fieldKinds.weight}
        testID="weight"
        autoFocus
        returnKeyType="next"
        value={weight}
        onChangeText={setWeight}
        onFocus={() => console.log("фокус: вес")}
        onBlur={() => { ушёлВес = true; }}
        onSubmitEditing={(e) => console.log("клавиша ввода, текст:", e.nativeEvent.text)}
      />
      <TextInput
        {...fieldKinds.reps}
        testID="reps"
        value={reps}
        onChangeText={setReps}
        onFocus={() => console.log("фокус: повторы")}
      />
    </View>
  );
}

mount(<SetForm />);
setTimeout(() => {
  fireEvent.changeText("weight", "82,5");
  console.log("подпись клавиши:", inspectField("weight").enterKeyHint);
  pressReturn("weight");
  setTimeout(() => console.log("ушёл: вес —", ушёлВес), 0);
}, 50);

Строки «фокус: повторы» нет: returnKeyType — только надпись на клавише. В предпросмотре она уехала в атрибут enterkeyhint, по которому браузер телефона подписал бы свою клавишу, и больше ничего не сделала. Сам React Native фокус тоже не передаст. В исходнике Android-поля (ReactTextInputManager.kt) системе прямо запрещают двигать фокус к соседнему полю — «since it must only be controlled from JS», им управляют только из JS. Зато поле, на котором нажали клавишу, фокус отпустило само: последняя строка примера спрашивает про это после обработчика и получает истину.

Это поведение по умолчанию, и у него есть имя — submitBehavior. Значений три:

Правило записано в TextInput.js react-native 0.86: однострочному полю без явного submitBehavior достаётся "blurAndSubmit", а заданный ему "newline" превращается туда же — переносить в одной строке нечего. Старое свойство blurOnSubmit в типах помечено устаревшим, и submitBehavior его перекрывает.

Раз фокус переводит только JS, нужен доступ к следующему полю — ref, заведённый как в части IV (статья «Ссылки на узлы: useRef и ref как пропс»). Меняется то, что в нём лежит. Не HTMLInputElement, а нативный элемент поля — тот же, что в прошлой статье нашёлся в e.target, с его focus(), blur() и measure(). TextInput добавляет к нему свои методы, и в типах react-native их три: clear(), isFocused() и setSelection(). Четвёртый, getNativeRef(), в рантайме react-native есть, но в его d.ts не объявлен, и компилятор на него скажет Свойство "getNativeRef" не существует в типе "TextInput". Ни value, ни form, ни validity у него нет: значение живёт в состоянии, а не в поле.

Предпросмотр здесь снова льстит, как с e.target.value в прошлой статье. Под ref в песочнице лежит <input> от react-native-web: value у него есть, зато из трёх методов поля — только clear() и isFocused(): setSelection() нет, как нет и getNativeRef(). Компилятор держится телефона: на ref.current?.value он скажет Свойство "value" не существует в типе "TextInput".

Тип пишется так же, как для View в первой статье части: React.ComponentRef<typeof TextInput>. Короткое useRef<TextInput> компилятор не пропустит: "TextInput" относится к значению, но здесь используется как тип. Прогноз для цепочки «вес → Далее → повторы → Готово»: какие строки придут и в каком порядке?

declare const fieldKinds: Record<"weight" | "reps", import("react-native").TextInputProps>;
declare function pressReturn(testID: string): void;
const { View, TextInput } = ReactNative;

function SetForm() {
  const [weight, setWeight] = React.useState("");
  const [reps, setReps] = React.useState("");
  const repsRef = React.useRef<React.ComponentRef<typeof TextInput>>(null);
  return (
    <View style={{ gap: 8 }}>
      <TextInput
        {...fieldKinds.weight}
        testID="weight"
        autoFocus
        value={weight}
        onChangeText={setWeight}
        returnKeyType="next"
        submitBehavior="submit"
        onSubmitEditing={() => repsRef.current?.focus()}
        onBlur={() => console.log("ушёл: вес")}
      />
      <TextInput
        {...fieldKinds.reps}
        ref={repsRef}
        testID="reps"
        value={reps}
        onChangeText={setReps}
        returnKeyType="done"
        onSubmitEditing={() => console.log("записать:", weight, "×", reps)}
        onFocus={() => console.log("фокус: повторы")}
        onBlur={() => console.log("ушёл: повторы")}
      />
    </View>
  );
}

mount(<SetForm />);
setTimeout(() => {
  fireEvent.changeText("weight", "82,5");
  pressReturn("weight");
  fireEvent.changeText("reps", "5");
  pressReturn("reps");
  console.log("такт закончился");
}, 50);

У веса стоит submitBehavior="submit", и в предпросмотре он не изменил ничего: react-native-web этого свойства не читает — в его TextInput есть только старое blurOnSubmit, а неизвестные свойства он молча отбрасывает. На телефоне разница видна глазами. С умолчанием "blurAndSubmit" поле по клавише завершает ввод и прячет клавиатуру: на Android это clearFocusAndMaybeRefocus(), который кончается вызовом hideSoftKeyboard(), на iOS — endEditing. Следующей строкой ваш focus() поднимает клавиатуру снова, и на каждом «Далее» она дёргается вниз и вверх. С "submit" фокус с поля не снимается, клавиатура остаётся на месте, а фокус просто переезжает к соседу.

Отсюда правило цепочки: у всех полей, кроме последнего, — returnKeyType="next", submitBehavior="submit" и focus() следующего в onSubmitEditing. У последнего — "done" и умолчание: форма заполнена, клавиатуру пора убирать.

const { TextInput } = ReactNative;

try {
  console.log("в фокусе:", TextInput.State.currentlyFocusedInput());
} catch (error) {
  console.log(String(error));
}

Проверки браузера — required, pattern, validity — остались в части II. Здесь проверка — обычная функция: берёт значения формы и отдаёт объект ошибок, у верного поля ключа в нём нет. Числа она разбирает через parseAmount из прошлой статьи, поэтому запятая в весе ошибкой не считается. Прогноз для четырёх черновиков подхода:

declare function parseAmount(text: string): number | null;

type Field = "weight" | "reps";
type SetValues = Record<Field, string>;
type SetErrors = Partial<Record<Field, string>>;

function validateSet(values: SetValues): SetErrors {
  const errors: SetErrors = {};
  if (parseAmount(values.weight) === null) errors.weight = "Вес — число, например 82,5";
  const reps = parseAmount(values.reps);
  if (reps === null || !Number.isInteger(reps) || reps < 1) errors.reps = "Повторы — целое число от 1";
  return errors;
}

const drafts: SetValues[] = [
  { weight: "82,5", reps: "5" },
  { weight: "", reps: "5" },
  { weight: "82,5", reps: "5,5" },
  { weight: "8,2,5", reps: "0" },
];
for (const draft of drafts) {
  console.log(draft.weight || "пусто", "×", draft.reps, "→", JSON.stringify(validateSet(draft)));
}

У верного черновика объект пуст — «можно записывать» проверяется как Object.keys(errors).length === 0. «5,5» parseAmount честно разобрал в 5.5, и остановила его уже проверка на целое: дробных повторов не бывает. У последнего черновика неверно всё, и ошибок две — показывать надо обе, каждую под своим полем.

Теперь — когда показывать. Если выводить ошибки на каждой отрисовке, человек увидит красное под весом раньше, чем нажмёт первую цифру. В части II эту задачу решал псевдокласс :user-invalid: он ждёт, пока с полем поработают. CSS здесь нет, поэтому «поработал» запоминаем сами — в touched, когда поле теряет фокус; в цепочке это как раз нажатие «Далее». Сама ошибка — обычный Text под полем, а рамка краснеет вторым стилем в массиве, как в разделе «Массив в пропсе style: кто кого перекрывает» статьи про StyleSheet.create.

Поле с ошибкой под ним собирает компонент FormField. Ref в React 19 — обычный проп, это тоже из статьи части IV про ref, поэтому FormField просто пропускает его в TextInput вместе с остальными свойствами. validateSet уже в подложке. Прогноз: что будет написано под полями после каждой отрисовки?

declare const fieldKinds: Record<"weight" | "reps", import("react-native").TextInputProps>;
declare function pressReturn(testID: string): void;
type Field = "weight" | "reps";
type SetValues = Record<Field, string>;
declare function validateSet(values: SetValues): Partial<Record<Field, string>>;
const { View, Text, TextInput, StyleSheet } = ReactNative;

type TextInputProps = import("react-native").TextInputProps;
type InputRef = React.ComponentRef<typeof TextInput>;
interface FormFieldProps extends TextInputProps {
  error?: string;
  ref?: React.Ref<InputRef>;
}

function FormField({ error, ...input }: FormFieldProps) {
  return (
    <View>
      <TextInput {...input} style={[styles.input, error ? styles.invalid : null]} />
      {error ? <Text style={styles.error}>{error}</Text> : null}
    </View>
  );
}

function SetForm() {
  const [values, setValues] = React.useState<SetValues>({ weight: "", reps: "" });
  // :user-invalid здесь нет — «человек уже побывал в поле» запоминаем сами
  const [touched, setTouched] = React.useState<Partial<Record<Field, boolean>>>({});
  const repsRef = React.useRef<InputRef>(null);
  const errors = validateSet(values);
  const shown = (f: Field) => (touched[f] ? errors[f] : undefined);
  console.log("под весом:", shown("weight") ?? "—", "| под повторами:", shown("reps") ?? "—");
  return (
    <View style={{ gap: 8 }}>
      <FormField {...fieldKinds.weight} testID="weight" autoFocus error={shown("weight")}
        value={values.weight} onChangeText={(weight) => setValues({ ...values, weight })}
        onBlur={() => setTouched({ ...touched, weight: true })}
        returnKeyType="next" submitBehavior="submit" onSubmitEditing={() => repsRef.current?.focus()} />
      <FormField {...fieldKinds.reps} ref={repsRef} testID="reps" error={shown("reps")}
        value={values.reps} onChangeText={(reps) => setValues({ ...values, reps })}
        onBlur={() => setTouched({ ...touched, reps: true })} returnKeyType="done" />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: "#999", borderRadius: 6, padding: 8 },
  invalid: { borderColor: "#c33" },
  error: { color: "#c33", fontSize: 12, marginTop: 2 },
});

mount(<SetForm />);
setTimeout(() => {
  fireEvent.changeText("weight", "8,2,5");
  pressReturn("weight");
}, 50);
setTimeout(() => fireEvent.changeText("weight", "82,5"), 100);

Пока человек печатал в весе «8,2,5», поле молчало: оно ещё не тронуто. Красное появилось по «Далее» — фокус ушёл в повторы, вес получил onBlur. А исчезло оно сразу, как только вес исправили, не дожидаясь нового ухода с поля: touched у веса уже true, а ошибки пересчитываются на каждой отрисовке. Под повторами пусто, хотя повторов нет: туда только вошли и ещё не выходили.

Отправки нет — есть функция, которую зовёт клавиша «Готово» на последнем поле, а в полной форме ещё и кнопка. После записи поле повторов чистится, а клавиатура прячется вызовом Keyboard.dismiss(): начинается отдых, и половина экрана под клавиатурой больше не нужна. Keyboard — модуль React Native, и dismiss() у него делает одно: снимает фокус с поля, которое сейчас в фокусе. В react-native это одна строка, blurTextInput(currentlyFocusedInput()), и в react-native-web — та же, только со старым currentlyFocusedField(). Возьмём одно поле и правило показа из прошлого раздела. Прогноз: сколько отрисовок и что будет под полем после записи?

declare const fieldKinds: Record<"reps", import("react-native").TextInputProps>;
declare function pressReturn(testID: string): void;
const { View, Text, TextInput, Keyboard } = ReactNative;

function RepsForm() {
  const [reps, setReps] = React.useState("");
  const [touched, setTouched] = React.useState(false);
  const error = touched && !/^[1-9]\d*$/.test(reps) ? "Повторы — целое число от 1" : undefined;
  console.log("повторы:", JSON.stringify(reps), "| ошибка:", error ?? "—");

  const save = () => {
    console.log("записано:", reps);
    // следующий подход начинается с чистого поля и без красного
    setReps("");
    setTouched(false);
    // начинается отдых: клавиатура больше не нужна
    Keyboard.dismiss();
  };

  return (
    <View>
      <TextInput
        {...fieldKinds.reps}
        testID="reps"
        autoFocus
        value={reps}
        onChangeText={setReps}
        onBlur={() => setTouched(true)}
        returnKeyType="done"
        onSubmitEditing={save}
      />
      {error ? <Text style={{ color: "#c33" }}>{error}</Text> : null}
    </View>
  );
}

mount(<RepsForm />);
setTimeout(() => {
  fireEvent.changeText("reps", "5");
  pressReturn("reps");
}, 50);

Подход записался, поле очистилось — и тут же покраснело. Причина в строке, где про ошибки нет ни слова: Keyboard.dismiss() снял фокус с поля, а снятие фокуса — это onBlur, и он пометил поле тронутым. Все три сеттера сработали внутри одного обработчика и ушли в одну очередь, как в статье части IV «Функция-обновитель и очередь обновлений»; setTouched(true) из onBlur встал в неё последним и перебил setTouched(false).

Убрать Keyboard.dismiss() не поможет. Последнее поле отпускает фокус по «Готово» и само — это умолчание "blurAndSubmit" из первого раздела. Изменится только время: в предпросмотре этот onBlur придёт тактом позже, отдельной отрисовкой, и красное появится на ней. Бороться с порядком событий бесполезно: на телефоне onBlur приходит из нативного поля событием, и когда именно — решает не ваш код. Менять надо правило показа.

Новое правило такое: пустое поле при уходе с него не ругаем — ругаем только после попытки записать. Непустое неверное поле краснеет по-прежнему, после ухода. Человек, пролиставший поле «Далее», ещё ничего не ввёл и ни в чём не ошибся, а после записи поле пустое потому, что его очистили мы. Попытку записать отмечает отдельный флаг submitted — он и показывает все ошибки разом.

Keyboard.dismiss() не «прячет клавиатуру» сам по себе: клавиатура на телефоне живёт, пока в фокусе поле. Поэтому любой вызов dismiss — это чей-то onBlur.

Соберём всё. submit зовут двое: кнопка «Записать» и «Готово» на последнем поле. При ошибке он отмечает попытку и ставит курсор в первое неверное поле — так делал браузер в части II, когда форму с ошибкой пытались отправить. Какое поле первое, решает список order — порядок полей на экране. Из него же выводится цепочка: у каждого поля, кроме последнего, «Далее» ведёт к следующему, у последнего «Готово» зовёт submit.

Вес пришёл из прошлого подхода. FormField и validateSet — в подложке. Прогноз: сначала «Записать» при пустых повторах, потом ввод повторов и «Готово». Что напечатается и где окажется фокус?

declare const fieldKinds: Record<"weight" | "reps", import("react-native").TextInputProps>;
declare function parseAmount(text: string): number | null;
declare function pressReturn(testID: string): void;
type Field = "weight" | "reps";
type SetValues = Record<Field, string>;
declare function validateSet(values: SetValues): Partial<Record<Field, string>>;
type TextInputProps = import("react-native").TextInputProps;
type InputRef = React.ComponentRef<typeof TextInput>;
interface FormFieldProps extends TextInputProps {
  error?: string;
  ref?: React.Ref<InputRef>;
}
declare function FormField(props: FormFieldProps): React.ReactElement;
const { View, Text, TextInput, Pressable, Keyboard } = ReactNative;

// порядок полей на экране: по нему идёт «Далее» и ищется первая ошибка
const order: Field[] = ["weight", "reps"];

function SetForm() {
  const [values, setValues] = React.useState<SetValues>({ weight: "82,5", reps: "" });
  const [touched, setTouched] = React.useState<Partial<Record<Field, boolean>>>({});
  const [submitted, setSubmitted] = React.useState(false);
  const refs = { weight: React.useRef<InputRef>(null), reps: React.useRef<InputRef>(null) };
  const errors = validateSet(values);
  const shown = (f: Field) => (submitted || (touched[f] && values[f] !== "") ? errors[f] : undefined);
  console.log("повторы:", JSON.stringify(values.reps), "| ошибка:", shown("reps") ?? "—");

  const submit = () => {
    const first = order.find((f) => errors[f]);
    if (first) {
      setSubmitted(true);
      refs[first].current?.focus();
      return;
    }
    console.log("записано:", parseAmount(values.weight), "кг ×", parseAmount(values.reps));
    // вес обычно тот же, что в прошлом подходе, — чистим только повторы
    setValues({ ...values, reps: "" });
    setTouched({});
    setSubmitted(false);
    Keyboard.dismiss();
  };

  return (
    <View style={{ gap: 8 }}>
      {order.map((f, i) => {
        const next = order[i + 1];
        return (
          <FormField key={f} {...fieldKinds[f]} ref={refs[f]} testID={f} error={shown(f)}
            value={values[f]} onChangeText={(text) => setValues({ ...values, [f]: text })}
            onFocus={() => console.log("фокус:", f)} onBlur={() => setTouched({ ...touched, [f]: true })}
            returnKeyType={next ? "next" : "done"} submitBehavior={next ? "submit" : "blurAndSubmit"}
            onSubmitEditing={next ? () => refs[next].current?.focus() : submit} />
        );
      })}
      <Pressable testID="save" onPress={submit}>
        <Text>Записать</Text>
      </Pressable>
    </View>
  );
}

mount(<SetForm />);
setTimeout(() => fireEvent.press("save"), 50);
setTimeout(() => {
  fireEvent.changeText("reps", "5");
  pressReturn("reps");
}, 100);

Первое нажатие ничего не записало: ошибка показалась под повторами, и курсор встал туда же — искать, что не так, не нужно. Второе прошло через «Готово»: подход записан числами, вес остался, повторы очищены, и под ними пусто, хотя Keyboard.dismiss() снова снял фокус и onBlur снова пометил поле. Пометка есть, а красного нет: поле пустое, и попытки записать ещё не было.

Третье поле — например, отдых в секундах — теперь добавляется в Field, order и validateSet, и всё. returnKeyType, submitBehavior и то, куда ведёт клавиша, пересчитаются сами: «Далее» у повторов поведёт в отдых, «Готово» переедет на отдых.

Одну ловушку формы предпросмотр не покажет вовсе. На экране тренировки форма стоит под списком подходов, а экран прокручивается — это ScrollView. Пока открыта клавиатура, первое касание мимо поля ScrollView по умолчанию забирает себе: клавиатура прячется, а кнопка «Записать» нажатия не получает, и человек жмёт второй раз. Так и написано в описании свойства keyboardShouldPersistTaps: при "never", которое стоит по умолчанию, дочерние элементы такого касания не получат. Лечится одним свойством:

// экран тренировки: записанные подходы списком, форма — под ними
<ScrollView keyboardShouldPersistTaps="handled">
  {sets.map((set) => (
    <SetRow key={set.id} set={set} />
  ))}
  <SetForm onSave={addSet} />
</ScrollView>

С "handled" касание, которое кто-то внутри обработал, — наша кнопка — до кнопки и доходит, а клавиатуру прячет Keyboard.dismiss() в submit. Касание по пустому месту клавиатуру по-прежнему убирает. У FlatList то же свойство — он построен на ScrollView. В предпросмотре разницы не будет: в ScrollView react-native-web перехват первого касания закомментирован, а fireEvent.press — щелчок, до которого прокрутке дела нет. Что делать, когда клавиатура закрывает саму форму, — в последней статье главы.

FormField и validateSet переезжают в подложку следующих статей главы, а форма там понадобится уже готовой. Следующая разбирает, что на самом деле происходит внутри кнопки «Записать» между касанием и onPress.