我当时正在探索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'));
暂无答案!
目前还没有任何答案,快来回答吧!