将输入字段与Mousetrap.js集中-但输入字段还将热键粘贴为值？

Question

请看以下示例。我使用了某些捕鼠器功能来增强the official example here。因此，每当有人按下alt+1时，第一个输入字段将聚焦，每当有人按下alt+2时，第二个输入字段将聚焦。有用。

问题：但是，输入字段也将获取热键所按下的值（alt+1然后呈现为¡，alt+2呈现为€）。 但是我只是想让它成为热键，我不希望它是实际值在输入字段中。我该怎么做呢？

我可以完全清除/删除输入字段。这将在此处的示例中起作用，但是我不想这样做，因为在我的最终应用程序中，将需要保留输入字段的状态，因此我不能只删除它。

有什么建议吗？

import React from "react"
import Mousetrap from "mousetrap"

export default class CustomTextInput extends React.Component {
  constructor(props) {
    super(props)
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef()
    this.textInput2 = React.createRef()
    this.focusTextInput = this.focusTextInput.bind(this)
  }

  componentDidMount() {
    Mousetrap.bind("alt+1", () => {
      this.focusTextInput(1)
    })

    Mousetrap.bind("alt+2", () => {
      this.focusTextInput(2)
    })
  }

  focusTextInput(id) {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    if (id === 1) {
      this.textInput.current.focus()
    }
    if (id === 2) {
      this.textInput2.current.focus()
    }
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input type="text" ref={this.textInput} className="mousetrap" />
        <input type="text" ref={this.textInput2} className="mousetrap" />
      </div>
    )
  }
}

I

Answer 1

您是否尝试过event.preventDefault（）？

Mousetrap.bind("alt+1", (e) => {
            e.preventDefault();
      this.focusTextInput(1);
    })

    Mousetrap.bind("alt+2", () => {
        e.preventDefault();
    this.focusTextInput(2)
    })