任意の入力にショートカットを含む特殊文字を追加するには？

Question

私は、ユーザーがショートカットを押すたびに特殊文字、絵文字などを追加する必要のあるアプリを持っていますCtrl + D。

私はフラックスを使用していて、ページ上にいくつかの入力があるため、誰かが入力の1つに文字を追加すると、アクションが呼び出され、ストアにディスパッチされ、ビューが更新されます。

この特別なcharを追加するには、keyEventを処理し、ストア内の対応する属性を更新するために使用されている入力コンポーネントを知る必要があります。

handleShortcut(evt) { 
    if (evt.keyCode === ...) { 
     MyActions.addSpecialChar(); 
     evt.preventDefault(); 
    } 
} 

これは唯一の方法ですか？私はdocument.activeElementまたはevt.targetを使用して入力を得ることができることを知っていますが、入力はストア状態によって制御されるため、値を変更することはできません。物事をより明確にする

**更新**

I場合は...私は、私のアプリは、「デスクトップアプリケーション」、私は私のアプリにいるどの入力に関係なく同じように動作したいと思いますキーの組み合わせを押すと、その入力に特別なcharが置かれます。つまり、onChangeによって処理されます。 （私はReactやJSに精通していないので、あまりにも多くのことを尋ねています）

私はその組み合わせを扱う上位コンポーネントにonKeyPressを持っていて、入力のvalue属性に特殊文字を追加した後にアクティブ入力を選択します。

私はそれを実現させる方法は、各入力にonKeyPressを設定することでした。これは、組み合わせを探し、my onChangeと同じアクションをテキスト内の特殊文字で送信します。私は私がすべての入力にonKeyPressイベントを追加する必要はありませんので、通常の文字として、のonChangeとの組み合わせを処理したいの上に述べたよう

<input 
    onKeyPress={(evt)=>{ 
     /* ... Check combination ... */ 
     let text = _addSpecialChar(evt.target.value); 
     MyActions.update(text); 
    }} 
    onChange={(evt)=>{ 
     MyActions.update(evt.target.value); 
    }} 
/> 

。これは可能ですか？

Answer 1

ありがとうございました。あなたの更新により、明らかになったものです。絵文字を入力した後、手動で入力の変更イベントをトリガすることはできますか？

handleShortcut(evt) { 
    if (evt.keyCode === ...) { 
     MyActions.addSpecialChar(); 
     evt.preventDefault(); 
     // Manually trigger on change here of the active element 
     evt.target.onchange(); 
    } 
} 

あなたは完全な変更イベントをシミュレートする必要がある場合、あなたはこれを試すことができます。

// Create a new 'change' event 
var event = new Event('change'); 

// Dispatch it. 
evt.target.dispatchEvent(event); 

Answer 2

これを試してみてください：

まず、このようなあなたのhandleShortCut関数を定義します。

<input type="text" className="input" 
value={this.state.value} 
onChange={this.handleShortcut.bind(this, 'mySpecialInput')}/> 

今、あなたは同じを使用することができます：あなたはあなたの入力を定義するときに

handleShortcut(input, evt) { 
    switch(input) { 
     case 'mySpecialInput': 
     if (evt.keyCode === ...) { 
      MyActions.addSpecialChar() 
      evt.preventDefault() 
     } 
     break 
     default: 
     ... 
    } 
} 

はこのような何かをそのコンポーネント内のどこでもhandleShortcut fnを使用し、渡される最初の値を設定するonChange関数を設定するときにはbindを使用します。handleShortcut関数が呼び出されるたびにその入力に対して編集されます。 'evt'パラメータはまだ渡されますが、2番目のパラメータとして渡されます。ですから、二つの異なる入力から特定の入力ソースを認識して、その後、ちょうど他のすべての一般的な方法を扱う、これを行うには、あなたのhandleShortcutを必要に応じて：

<input type="text" className="input" 
    value={this.state.value1} 
    onChange={this.handleShortcut.bind(this, 'mySpecialInput', 'value1')}/> 
<input type="text" className="input" 
    value={this.state.value2} 
    onChange={this.handleShortcut.bind(this, 'myOtherSpecialInput', 'value2')}/> 
<input type="text" className="input" 
    value={this.state.value3} 
    onChange={this.handleShortcut.bind(this, '', 'value3')}/> 

とあなたのhandleShortcut機能は次のようになります

handleShortcut(input, value, evt) { 
    switch(input) { 
     case 'mySpecialInput': 
     if (evt.keyCode === ...) { 
      MyActions.addSpecialChar() 
      evt.preventDefault() 
     } 
     break 
     case 'myOtherSpecialInput': 
     ... 
     default: 
     evt.preventDefault() 
     this.setState({[value]: this.state.value + 'my default symbol'}) 
    } 
} 

この時点で、valueという別のパラメータが渡されたことに注目してください。これはローカル状態のプロパティの名前で、入力の「値」として使用されます。それぞれのケースについて、影響を与えたい値をハードコードすることができますが、「デフォルト」の一般的なケースについてはその情報が必要になります。

Answer 3

おかげで答えを@chase！

今後の参考のために私の問題をどのように解決したのかを記述します。

handleShortcut(evt) { 
    if (evt.keyCode === ...) { 
     this.addSpecialChar(evt); 
     let newEvt = new Event('input', {bubbles: true}); 
     evt.target.dispatchEvent(newEvt); 
     evt.preventDefault(); 
    } 
} 

addSpecialChar(evt) { 
    let curText = evt.target.value; 
    let curPos = evt.target.selectionStart; 
    let newText = /* Add special char where you want */ 
    let newPos = curPos + 1; /* Move cursor where you want */ 
    evt.target.value = newText; 
    evt.target.selectionStart = newPos; 
} 

とフラックスとの私のコンポーネントは、次のようになります。

<HighOrderComponent onKeyPress={this.handleShortcut}> 
    <input 
     value={this.state.inputVal} 
     onChange={ 
      (evt) => MyAction.updateInputVal(evt.target.value) 
     } 
    /> 
    . 
    . 
    . 
    /* Other inputs */ 
    . 
    . 
    . 
</HighOrderComponent>