我有一个按钮,我希望它根据用户的操作使用react。 在这里:
你可以看到它有 4 种不同的状态。第一个是当没有执行特定操作时 (NONE
),第二个是当鼠标指针悬停在按钮上时 (HOVER
),第三个是当鼠标悬停在按钮上时当前点击按钮 (ONCLICK
),最后一次点击按钮 (SELECTED
)。
就算我们不那么在意,按钮图如下:
这些状态以枚举形式呈现:
enum button_states { NONE, HOVER, ONCLICK, SELECTED, BSTATE_LAST };
现在我尝试了一些代码来改变按钮的状态,这些代码在无限循环中执行。我有一个变量 prevState
保存最后一次点击之前的状态,还有一个变量 previouslyClicked
如果点击在最后一次循环迭代中处于事件状态则值为 1,否则值为 0。
if (CursorIsOnTheButton()) {
if (LeftClickIsActive()) {
if (actualState != ONCLICK)
prevState = actualState ;
previouslyClicked = 1;
actualState = ONCLICK;
}
else if (prevState == SELECTED && previouslyClicked) {
actualState = HOVER;
prevState = NONE;
previouslyClicked = 0;
}
else if (prevState == HOVER && previouslyClicked) {
actualState = SELECTED;
prevState = NONE;
previouslyClicked = 0;
}
else
actualState = HOVER;
}
else if (actualState != SELECTED)
actualState = NONE;
除了 SELECTED 状态外它工作正常:按钮永远不会进入该状态。
我做错了什么?
最佳答案
好吧,我也去试试。我建议重组状态变量。摆脱实际和以前的状态,只使用一个 state
作为按钮外观,这将在我们的伪代码片段中设置。摆脱 previouslyClicked
(相当于 state == ONCLICK
)并引入 pressed
如果按钮被按下则为 true,否则为 false不是:
if (CursorIsOnTheButton()) {
if (LeftClickIsActive()) {
if (state != ONCLICK) pressed = !pressed;
state = ONCLICK;
} else {
state = (pressed) ? SELECTED : HOVER;
}
} else {
state = (pressed) ? SELECTED : NONE;
}
ONCLICK
状态在这里执行双重任务;它标记状态“刚刚单击”,并确保在长按鼠标按钮期间不会打开和关闭按钮。所有其他状态都由一个简单的逻辑决定:
pressed? in button? clicking? state
------------ ------------ ------------ ------------
true dontcare dontcare SELECTED
false true true ONCLICK
false true false HOVER
false false dontcare NONE
这种方法的优点是您可以使用 pressed
检查按钮的按下状态,否则您必须检查状态。
它仍然只是伪代码,这意味着我当然还没有测试过它。
关于c - 按钮处理(伪代码/c),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24127121/