вход модели (текстовое поле) конечный автомат в xState

Хотелось бы прочитать ваши мысли о том, как вы будете моделировать ввод (текстовое поле) с помощью xState.

Согласно статье input ux, текстовое поле может иметь следующие состояния:

Текстовые поля ввода могут иметь одно из следующих состояний: по умолчанию, сфокусировано, ошибка и отключено. Все состояния должны быть четко отделены друг от друга.

Это имеет смысл, так как другие библиотеки, такие как Material UI, используют более или менее те же состояния.

Мне интересно, как это смоделировать.

Просто напишу несколько мыслей:

• Я думаю, очевидно, что значение должно быть частью контекста xState, поскольку оно может иметь любое значение.
• упомянутые состояния также имеют смысл

Теперь часть, в которой я не уверен: скажем, у нас есть встроенная проверка (onChange), которая говорит, что значение текстового поля в порядке, и для этого мы хотим установить с помощью css класс «действительный», который дает текстовому полю зеленую рамку.

• Нам потребуется либо переход состояния из default в default_valid (а не только valid, потому что мы все еще находимся в состоянии по умолчанию) ... то же самое относится к default_invalid ... а также для некоторых других комбинаций, которые могут закончиться взрывом состояния.

• смоделируйте его в xState как дочернее состояние и получите к нему доступ через default.valid или default.invalid...

В обоих сценариях нам потребуется в компоненте текстового поля другое сопоставление, которое читается примерно так:

(просто псевдокод)

switch(state) {
'default.invalid': setColor(red), setDisabled(false)
'default.valid': setColor(green), setDisabled(false)
'default.valid.submitting': {
setColor(green)
setDisabled(true)
}

Я действительно не доволен этим подходом к управлению состоянием в компоненте и временем в машине xState. Это просто кажется мне неправильным.

Я бы предпочел просто использовать состояния машин ввода ... которые хорошо работают для некоторых значений по умолчанию, таких как default, focused ... но как только поле находится «в 2 или более состояниях», возникает беспорядок.

Одним из способов было бы просто сохранить некоторые состояния высокого уровня и написать дополнительные в контексте и просто передать их в текстовое поле? (звучит тоже не очень хорошо)

Так что хотелось бы услышать ваши мысли, как бы вы смоделировали что-то подобное.