javascript—如何防止xstate节点在接收事件时重置其子并行状态?

k3fezbri  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(225)

我当时正在探索xstate世界,并试图重现本次演讲中提到的机器@davidkpiano
并且面临着正确过渡的问题。当我向父计算机发送消息时,它会重置所有子计算机。
例如:在我一个接一个地触发更改和聚焦事件后,我希望机器处于肮脏和聚焦状态。但在发送焦点消息后,原始状态将重置回原始状态。
我发现了这个问题,但是多个转换做了相同的事情(正如问题本身中实际描述的那样)
此外,我不想将有关原始、集中和接触状态的所有信息存储到上下文中,因为这样做不会像使用状态机那样安全。
下面的代码可以复制到https://xstate.js.org/viz/

  1. const createPristineMachineConfig = (inputName) => {
  2. return {
  3. id: `${inputName}.pristine`,
  4. initial: 'pristine',
  5. states: {
  6. pristine: {
  7. on: {
  8. [`${inputName}.CHANGE`]: 'dirty',
  9. },
  10. },
  11. dirty: {
  12. type: 'final',
  13. },
  14. },
  15. };
  16. };
  17. const createTouchedConfig = (inputName) => {
  18. return {
  19. id: `${inputName}.touched`,
  20. initial: 'untouched',
  21. states: {
  22. untouched: {
  23. on: {
  24. [`${inputName}.TOUCH`]: 'touched',
  25. },
  26. },
  27. touched: {
  28. type: 'final',
  29. },
  30. },
  31. };
  32. };
  33. const createFocusedMachineConfig = (inputName) => {
  34. return {
  35. id: `${inputName}.focused`,
  36. initial: 'blurred',
  37. states: {
  38. blurred: {
  39. on: {
  40. [`${inputName}.FOCUS`]: 'focused',
  41. },
  42. },
  43. focused: {
  44. on: {
  45. [`${inputName}.BLUR`]: 'blurred',
  46. },
  47. },
  48. },
  49. };
  50. };
  51. const createInputMachineConfig = (inputName) => ({
  52. id: inputName,
  53. type: 'parallel',
  54. context: {
  55. value: '',
  56. },
  57. on: {
  58. FOCUS: {
  59. actions: send(`${inputName}.FOCUS`),
  60. internal: true,
  61. },
  62. BLUR: {
  63. actions: [send(`${inputName}.TOUCH`), send(`${inputName}.BLUR`)],
  64. internal: true,
  65. },
  66. CHANGE: {
  67. actions: [assign((ctx, event) => ({ ...ctx, value: event.payload.value })), send(`${inputName}.CHANGE`)],
  68. internal: true,
  69. },
  70. },
  71. states: {
  72. pristine: createPristineMachineConfig(inputName),
  73. touched: createTouchedConfig(inputName),
  74. focused: createFocusedMachineConfig(inputName),
  75. },
  76. });
  77. const loginInputMachine = Machine(createInputMachineConfig('login'));

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题