입력에 단축키가있는 특수 문자를 추가하는 방법은 무엇입니까?

Question

사용자가 바로 가기를 누를 때마다 특수 문자, 그림 이모티콘 등을 추가해야하는 앱이 있습니다. Ctrl + D.

문제는 플럭스를 사용하고 있으며 내 페이지에 여러 개의 입력이 있으므로 누군가가 입력 중 하나에 문자를 추가하면 작업을 호출하고 저장소로 전달하고보기를 업데이트합니다.

이 특수 문자를 추가하려면 keyEvent를 처리하고 저장소의 해당 특성을 업데이트하는 데 사용 된 입력 구성 요소를 알아야합니다.

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

유일한 방법입니까? document.activeElement 또는 evt.target을 사용하여 입력을 얻을 수 있지만 입력 값이 스토어 상태로 제어되므로 값을 변경할 수 없음을 알고 있습니다. 어떤 아이디어입니까?

** 업데이트 ** 나는 경우 상황이 더 명확 ... 내가, 내 앱이 내 응용 프로그램에있어 어떤 입력에 "데스크톱 응용 프로그램"에 상관없이처럼 행동하고 싶습니다 만들려면

키 조합을 누르면 해당 입력에 특수 문자가 저장됩니다. 즉, onChange에 의해 처리됩니다. (나는 React 나 JS에 익숙하지 않다. 그래서 아마도 너무 많이 묻고있다.)

그래서 조합을 처리 할 수있는 상위 구성 요소에 onKeyPress가 있고 onChange가 트리거 될 것이다. 입력의 value 속성에 특수 문자를 추가 한 후 활성 입력.

필자가 만든 방법은 각 입력에 onKeyPress를 설정하여 조합을 찾고 내 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 함수를 정의 :

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

을 그런 다음 입력을 정의 같은 것을 수행 할 때

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

지금 같은를 사용할 수 있습니다 해당 구성 요소의 모든 곳에서 handleShortcut fn을 호출하고 전달할 첫 번째 값을 설정하기 위해 onChange 함수를 설정할 때 bind를 사용하십시오. handleShortcut 함수가 호출 될 때마다 전달됩니다. 그 입력에 대해 'evt'매개 변수는 여전히 전달되지만 두 번째 매개 변수로 전달됩니다.

<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를 필요에 따라서 단지 다른 모든 것들에게 일반적인 방법을 처리,이 작업을 수행

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>