xState中的模型输入（文本字段）状态机

Question

希望阅读您对如何使用xState建模输入（文本字段）的想法。

根据input ux article，文本字段可以具有以下状态：

输入文本字段可以具有以下状态之一：默认，已聚焦，错误和禁用。所有州应清楚地区分。

这很有意义，因为其他类似Material UI的库使用或多或少相同的状态。

我想知道如何对此建模。

让我写下一些想法：

• 我认为很明显，该值应该是xState上下文的一部分，因为它可以具有任何值
• 提到的状态也很有意义

现在我不太确定的部分：可以说我们有一个内联验证（onChange），它说textfields值还可以，为此，我们要设置为使用CSS设置一个“ valid”类，该类为textfield赋予绿色边框。

• 我们将需要从default到default_valid的状态转换（不只是valid，因为我们仍处于默认状态）... default_invalid同样适用...还有更多的组合可能会导致状态爆炸。

• 在xState中将其建模为子状态，并通过default.valid或default.invalid ...]]]

在这两种情况下，我们都需要在textfield组件中使用另一个映射，该映射读取类似内容

（只是伪代码）

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个或更多状态”，它就会得到一个一团糟。

一种方法是仅保留一些高级状态并在上下文中写入其他状态，然后将其传递到文本字段？ （听起来也不是太好了）

所以，很想听听您的想法，您将如何建模这样的东西。

希望阅读您对如何使用xState建模输入（文本字段）的想法。根据输入ux文章，文本字段可能具有以下状态：输入文本字段可以具有一个...

Answer 1

您可以使用state.matches(...)进行清理，和/或可以将这些操作直接置于与它们相关的状态，例如，在state.matches(...)或entry中。