xState中的模型输入(textfield)状态机

Question

很乐意阅读您对如何使用xState对输入(textfield)建模的想法。

根据一个输入ux文章，文本字段可能有以下状态：

输入文本字段可以具有下列状态之一:默认状态、焦点状态、错误状态和禁用状态。所有国家都应彼此明确区分。

这是有意义的，因为其他库，如物质UI使用或多或少相同的状态。

我想知道如何模拟这个模型。

让我写下一些想法：

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

现在，我不太确定的部分:假设我们有一个内联验证(onChange)，它表示textfield值是ok的，为此我们设置了希望用css设置一个类“有效”，为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 .但是，一旦场是“在两个或更多个州”，它就会变得一团糟。

一种方法是只保留一些高级状态，并在上下文中编写附加的状态，然后将其传递给textfield？(听起来也不太好)

所以我很想听听你的想法，你会怎样做这样的模型。

Answer 1

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