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

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

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

const createPristineMachineConfig = (inputName) => {
  return {
    id: `${inputName}.pristine`,
    initial: 'pristine',
    states: {
      pristine: {
        on: {
          [`${inputName}.CHANGE`]: 'dirty',
        },
      },
      dirty: {
        type: 'final',
      },
    },
  };
};

const createTouchedConfig = (inputName) => {
  return {
    id: `${inputName}.touched`,
    initial: 'untouched',
    states: {
      untouched: {
        on: {
          [`${inputName}.TOUCH`]: 'touched',
        },
      },
      touched: {
        type: 'final',
      },
    },
  };
};

const createFocusedMachineConfig = (inputName) => {
  return {
    id: `${inputName}.focused`,
    initial: 'blurred',
    states: {
      blurred: {
        on: {
          [`${inputName}.FOCUS`]: 'focused',
        },
      },
      focused: {
        on: {
          [`${inputName}.BLUR`]: 'blurred',
        },
      },
    },
  };
};

const createInputMachineConfig = (inputName) => ({
  id: inputName,
  type: 'parallel',
  context: {
    value: '',
  },
  on: {
    FOCUS: {
      actions: send(`${inputName}.FOCUS`),
      internal: true,
    },
    BLUR: {
      actions: [send(`${inputName}.TOUCH`), send(`${inputName}.BLUR`)],
      internal: true,
    },
    CHANGE: {
      actions: [assign((ctx, event) => ({ ...ctx, value: event.payload.value })), send(`${inputName}.CHANGE`)],
      internal: true,
    },
  },
  states: {
    pristine: createPristineMachineConfig(inputName),
    touched: createTouchedConfig(inputName),
    focused: createFocusedMachineConfig(inputName),
  },
});

const loginInputMachine = Machine(createInputMachineConfig('login'));

暂无答案!

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

相关问题