[xstate + react] using @xstate/inspect to display state machine char in webapp_zhentiw-编程思维

import "./styles.css";
import React from "react";
import ReactDOM from "react-dom";
import { createMachine, assign } from "xstate";
import { useMachine } from "@xstate/react";
import { inspect } from "@xstate/inspect";

inspect();

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  context: {
    count: 0
  },
  states: {
    inactive: {
      on: { TOGGLE: "active" }
    },
    active: {
      entry: assign({ count: (ctx) => ctx.count + 1 }),
      on: { TOGGLE: "inactive" }
    }
  }
});

function App() {
  const [state, send] = useMachine(toggleMachine, { devTools: true });
  const active = state.matches("active");
  const { count } = state.context;

  return (
    <div className="App">
      <h1>XState React Viz Template</h1>
      <h2>Fork this template!</h2>
      <button onClick={() => send("TOGGLE")}>
        Click me ({active ? "✅" : "❌"})
      </button>{" "}
      <code>
        Toggled <strong>{count}</strong> times
      </code>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/Answer1215/p/16917074.html

获取图片中的图表数据并拟合函数_dapenson-编程思维

获取数据 在看论文或说明手册遇到图表时,常遇到无法获取源数据或曲线的情况。以下使用WebPlotDigitizer在线工具通过像素级坐标标定并取点取数。 WebPlotDigitizer在线工具 该工具开源,并提供在线版和离线版,GitHub地址 以下图为例,本次使用WPS工具优化并获取一张相对清晰且像素较大(无损

7个顶级静态代码分析工具_辉---编程思维

https://zhuanlan.zhihu.com/p/449998059 静态代码分析或源代码分析是指使用静态代码分析工具对软件的“静态”(不运行的) 代码进行分析的一种方法,找出代码中潜在的漏洞。静态代码分析器检查源代码,找出特定的漏洞,并检查代码是否符合各种编码标准。 1为什么要进行静态代码分析? 在执行代

获取125种不同签名_dapenson-编程思维

无意中发现一个比较好用的个性签名网站,输入内容和颜色即可一键生成图片, 但一个个点太麻烦,因此通过F12查看网站请求可知,点击设计的时候实际上是发送一个带参数的post请求,返回签名图片地址。 以下将该请求复制为cURL(bash),再粘贴到curl转换工具网站,选择生成语言为python,即可自动生成示例源码,

使用python opencv延时摄影_dapenson-编程思维

使用opencv生成延时摄影视频 以下内容和源码使用openai的chatGPT生成。 下面是一个示例代码,它使用 OpenCV 库在 Python 中实现这个功能。请注意,这个程序需要您先安装 OpenCV 库。 我们设置了摄像头编号为 1,并且创建了一个名为 pic 的文件夹来保存图片。这样,每张保存的图片都会

[state machine] zag-js-编程思维

import { createMachine } from "@zag-js/core"; type MachineState = { value: "idle" | "focused"; }; type MachineContext = { value: string[]; focusedIndex: