2

我不确定标题的最佳表达方式，但希望描述会澄清。

我有一个使用 Redux 进行状态管理的 Angular2 组件。该组件使用*ngFor这样的按钮来渲染一组小输入。“状态”是这样的......

// 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"，更新状态，并使用新的空白输入和按钮重新渲染组件。

当输入聚焦（编辑）并且用户单击按钮时，就会出现问题。用户打算单击该按钮，但由于他们碰巧专注于该字段，因此它的行为与预期不符。该(blur)事件首先被触发，所以输入 onBlur 回调被触发，redux action 被调度，状态被更新，组件被重新渲染。但是，按钮(click)丢失了，所以没有创建新的输入。

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

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

谢谢！

4

0 回答 0