Хотел бы прочитать ваши мысли о том, как вы бы смоделировали ввод (текстовое поле) с помощью xState.
Согласно статье ux ввода текстовое поле может иметь следующие состояния:
Текстовые поля ввода могут иметь одно из следующих состояний: по умолчанию, в фокусе, ошибка , и отключен. Все состояния должны быть четко отделены друг от друга.
Это имеет смысл, поскольку другие библиотеки, такие как Material UI, используют более или менее одинаковые состояния.
Мне интересно, как это смоделировать.
Позвольте мне просто записать некоторые мысли:
- Я думаю, очевидно, что значение должно быть частью контекста xState поскольку он может иметь любое значение
- , упомянутые состояния также имеют смысл
Теперь часть, в которой я не так уверен: допустим, у нас есть встроенная проверка (onChange), которая говорит Значение текстовых полей в порядке, и для этого мы установили, что хотим установить с css класс «действительный», который придает текстовому полю зеленую границу.
Нам потребуется либо переход состояния с default на default_valid (а не только valid, потому что мы все еще находимся в состоянии по умолчанию) ... то же самое относится к default_invalid ... и еще несколько комбинаций, которые могли бы закончиться взрывом состояния.
смоделируйте его в xState как дочернее состояние и получите доступ к нему через default.valid или default.invalid ...
В обоих сценариях ios нам понадобится в компоненте текстового поля другое сопоставление, которое читает что-то вроде
(просто псевдокод)
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 или более состояниях», возникает беспорядок.
Один из способов - просто сохранить некоторые состояния высокого уровня и написать дополнительные в контексте и просто передать их в текстовое поле? (звучит не очень хорошо)
Так что хотелось бы услышать ваши мысли о том, как вы бы смоделировали что-то подобное.