[XState] A toggle active and inactive example
and Active Example XState Toggle
2023-09-14 08:59:13 时间
import { createMachine, interpret } from "xstate"; const elBox = document.querySelector("#box"); const machine = { initial: "inactive", states: { inactive: { on: { mousedown: "active", }, }, active: { on: { mouseup: "inactive", }, }, }, }; const toggleMachine = createMachine(machine); const toggleService = interpret(toggleMachine); // Determine the next value of `currentState` toggleService.onTransition((state) => { console.log(state); elBox.dataset.state = state.value; }); toggleService.start(); elBox.addEventListener("mousedown", (event) => { // send a click event toggleService.send(event); // {type: 'mousedown'} }); elBox.addEventListener("mouseup", () => { // send a click event toggleService.send(event); // {type: 'mouseup'} }); // toggleService.stop()
相关文章
- Spring Batch Read from DB and Write to File
- [Bash] Create and Copy Multiple Files with Brace Expansions in Bash
- [TypeScript] instanceof and Type Guards (getPrototypeOf)
- [Python] Read and plot data from csv file
- [Python] The get() method on Python dicts and its "default" arg
- [Mobx] Use MobX actions to change and guard state
- [Angular2 Form] patchValue, setValue and reset() for Form
- One Order distribution logic issue - automatic BDOC creation and sent to Middleware outbound queue -
- Atitit.mssql 数据库表记录数and 表体积大小统计
- 【23.58%】【code forces 321E】Ciel and Gondolas
- 【codeforces 793B】Igor and his way to work
- 【codeforces 367C】Sereja and the Arrangement of Numbers
- 成功解决TypeError: can only insert Interval objects and NA into an IntervalArr
- TensorFlow和深度学习新手教程(TensorFlow and deep learning without a PhD)
- C++ classes and uniform initialization
- HDU3988-Harry Potter and the Hide Story(数论-质因数分解)