Question

我不确定标题的最佳方式，但希望说明会澄清。

我有一个使用Redux进行状态管理的Angular2组件。该组件使用*ngFor使用这样的按钮呈现一个小输入数组。＆＃34;州＆＃34;是这样的......

// glossing over how I'd get this from the Redux store, 
// but assume we have an Immutable.js List of values, like this... 
let items = Immutable.fromJS([{value: foo}, {value: bar}, /*...etc*/ })

模板就像这样......

<input *ngFor="let item of items, let i = index" 
       type="text" 
       value="item.get('value')"
       (blur)="onBlur($event, i)">
<button (click)="onClick($event)">Add New Input</button>

当聚焦和编辑输入时，焦点移开，调用onBlur($event)回调，使用新值调度redux操作（即："UPDATE_VALUE"）。

onBlur($event, index) {
  let newValue = $event.target.value;
  this.ngRedux.dispatch({
    type: "UPDATE_VALUE",
    value: {index, newValue}
  });
}

reducer更新值（使用Immutable.js）：

case "UPDATE_VALUE": {
  let index = getIndex(action.value.index); // <-- just a helper function to get the index of the current value.
  return state.updateIn(["values", index], value => action.value.newValue);
}

状态已更新，因此使用更新的值重新呈现组件。

单击输入旁边的按钮时，将触发onClick($event)回调，该回调将调度不同的redux操作（即："ADD_VALUE"），更新状态，并重新呈现组件一个新的空白输入＆amp;按钮。

当输入被聚焦（编辑）并且用户单击按钮时，问题出现。用户打算单击该按钮，但由于他们碰巧专注于该字段，因此它不会按预期运行。首先触发(blur)事件，因此将触发输入onBlur回调，调度redux操作，更新状态，重新呈现组件。但是，按钮(click)会丢失，因此无法创建新输入。

问题： 有没有办法跟踪点击事件并在重新渲染后触发第二个操作？或者，有没有办法以某种方式链接redux动作，以便它们在重新渲染之前按顺序发生？

旁注 - 我已尝试将(click)事件更改为使用(mousedown)，该事件在(blur)之前触发，但导致Angular（在devMode中）抱怨检查后组件的@inputs被更改（在更改检测周期中状态发生了变化）。尽管如此，我还没有深入研究。我希望找到一个使用点击和模糊的解决方案。

谢谢！

Angular2 - 使用Redux和单向数据流时重新渲染时丢失的DOM事件

0 个答案: