如何为任何输入添加带有快捷方式的特殊字符？

Question

我有一个应用程序，每次用户按下快捷键 Ctrl+D 时，我都需要添加特殊字符、表情符号或类似的东西。

问题是我正在使用flux并且我的页面上有几个输入，所以当有人在其中一个输入中添加一个字符时，它会调用一个动作，分派到商店，然后他们会更新视图。

要添加这个特殊字符，我需要处理 keyEvent 并知道使用哪个输入组件来更新存储中的相应属性。

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

这是唯一的方法吗？我知道我可以使用document.activeElement 或evt.target 获取输入，但由于输入由商店状态控制，我无法更改它们的值...有什么想法吗？

** 更新**

为了让事情更清楚......我想让我的应用程序表现得像一个“桌面应用程序”，无论我在我的应用程序中的哪个输入，如果我按下组合键，它会放置一个特殊的字符在那个输入中，这意味着它将由 onChange 处理。 （我对 React 或 JS 不太熟悉，所以可能我要求太多了..）

所以我会在我的高阶组件中有一个 onKeyPress 来处理组合，并在将特殊字符添加到输入的value 属性后触发活动输入上的 onChange。

我实现它的方法是在每个输入上设置一个 onKeyPress，它将查找组合并发送与我的 onChange 相同的操作，但在文本中使用特殊字符。

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

正如我上面所说，我想将与 onChange 的组合作为普通字符来处理，因此我不必在每个输入上都添加 onKeyPress。这可能吗？

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

感谢@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>

Answer 3

试试这个：

首先像这样定义你的 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' 参数仍然被传递，但现在作为第二个参数。因此，如果您需要您的 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 的参数，这是本地状态的属性名称，用作输入的“值”。对于每种情况，我们都可以硬编码我们想要影响的值，但对于“默认”通用情况，我们需要这些信息。