タイトルの最適な表現方法がわかりませんでしたが、説明が明確になることを願っています。
状態管理に 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}
});
}
そして、レデューサーは値を更新します (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 アクションがディスパッチされ、状態が更新され、コンポーネントが再レンダリングされます。しかし、ボタン(click)
が失われるため、新しい入力は作成されません。
質問: クリック イベントを追跡し、再レンダリング後に 2 番目のアクションをトリガーする方法はありますか? または、何らかの形で還元アクションを連鎖させて、再レンダリングの前に順番に実行する方法はありますか?
サイドノート -以前にトリガーされた(click)
イベントを使用するように変更しようとしましたが、Angular (devMode)がチェック後にコンポーネントが変更されたと不平を言いました (変更検出サイクル中に状態が変更されました)。私はまだそれについて深く掘り下げていませんでした。クリックとぼかしをそのまま使用して解決策を見つけたいと思っています。(mousedown)
(blur)
@inputs
ありがとう!