希望阅读您对如何使用 xState 对输入(文本字段)建模的想法。
根据输入 ux 文章,文本字段可能具有以下状态:
输入文本字段可以具有以下状态之一:默认、聚焦、错误和禁用。所有的州都应该被清楚地区分开来。
这是有道理的,因为其他库(如 Material UI)使用或多或少相同的状态。
我想知道如何建模。
让我简单地写一些想法:
- 我认为很明显该值应该是 xState 上下文的一部分,因为它可以具有任何值
- 提到的状态也很有意义
现在我不太确定的部分:假设我们有一个内联验证(onChange),它表示文本字段的值是好的,为此我们设置想要使用 css 设置一个类“有效”,它为文本字段提供绿色边框。
我们需要从
default
to的状态转换default_valid
(不仅仅是valid
因为我们仍处于默认状态)......这同样适用于default_invalid
......以及更多可能以状态爆炸结束的组合。在 xState 中将其建模为子状态并通过
default.valid
or访问它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 个或更多状态”,它就会变得一团糟。
一种方法是只保留一些高级状态并在上下文中编写其他状态并将其传递给文本字段?(听起来也不太好)
所以很想听听你的想法,你将如何建模这样的东西。