Фокусировка поля ввода с помощью Mousetrap.js - но поле ввода также вставляет горячую клавишу как значение? - PullRequest
Новая
       45

Фокусировка поля ввода с помощью Mousetrap.js - но поле ввода также вставляет горячую клавишу как значение?

1 голос
/ 07 октября 2019

Посмотрите на следующий пример. Я улучшил официальный пример с некоторыми функциями мышеловки. Поэтому, когда кто-то нажимает 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

1 Ответ

2 голосов
/ 07 октября 2019

вы пробовали event.preventDefault ()? 

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

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