看看下面的例子。我用一些捕鼠器功能增強(qiáng)了這里的官方示例。因此,每當(dāng)有人按下 時alt+1,第一個輸入字段將聚焦,每當(dāng)有人按下alt+2第二個輸入字段時,將聚焦。有用。問題: 但是,輸入字段也將按下的任何值作為熱鍵(alt+1然后呈現(xiàn)為?,在輸入中alt+2呈現(xiàn)為€)。但我只是希望這是一個熱鍵,我不希望它是輸入字段中的實際值。我該怎么做呢?我可以完全清除/刪除輸入字段。這可以在這里的示例中工作,但我不想這樣做,因為在我的最終應(yīng)用程序中,需要保留輸入字段的狀態(tài),所以我不能只是刪除它。有什么建議嗎?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> ) }}一世
使用 Mousetrap.js 聚焦輸入字段 - 但輸入字段也將熱鍵粘貼為值?
回首憶惘然
2021-11-12 14:19:26