使用 Mousetrap.js 聚焦输入字段 - 但输入字段也将热键粘贴为值？

Question

看看下面的例子。我用一些捕鼠器功能增强了这里的官方示例。因此，每当有人按下 时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>

    )

  }

}

一世

Answer 1

你试过 event.preventDefault() 吗？Mousetrap.bind("alt+1", (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; this.focusTextInput(1);&nbsp; &nbsp; })&nbsp; &nbsp; Mousetrap.bind("alt+2", () => {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; this.focusTextInput(2)&nbsp; &nbsp; })