Проблема с onChange для маскированного ввода в React - PullRequest
Новая
       53

Проблема с onChange для маскированного ввода в React

0 голосов
/ 29 октября 2018

Я пытаюсь создать замаскированный ввод в React (без использования замаскированной входной библиотеки). Моя проблема в том, что я не смог получить доступ к e.key с помощью onchange prop - он просто дает мне undefined, поэтому я использовал вместо него onKeyDown - это работает, но в консоли я получаю предупреждение:

"Предупреждение. Неудачный тип реквизита: вы предоставили value реквизит для поля формы без обработчика onChange. Это сделает поле доступным только для чтения. Если поле должно быть изменяемым, используйте defaultValue. В противном случае, установите onChange или readOnly. "

Я пытался использовать keyDown для получения ключа, а затем маскировать ввод с помощью функции onChange, но он всегда на один символ позади того, где он должен быть.

Так выглядит мой код, я был бы очень благодарен за любые советы и т. Д., Которые могли бы это исправить. 

class App extends Component {
  state={
    input: "",
    acc: "", //this is an accumulator I'm using to hold the unmasked version of the input
    currentKey: ""
  }

  getKey = (e) => {
    if(e.key === "Backspace"){ //removes last letter on backspace
      const lastLetterRemoved = this.state.acc.substr(0,this.state.acc.length-1)
      this.setState({acc: lastLetterRemoved, input: this.mask(lastLetterRemoved)})
    } else {
      let currentChar;
      if(!Number(e.key)){//ignores non-numeric characters
          currentChar = ""
      } else {
        currentChar=e.key //adds current key to accumulator, masks it and sets input value
        const currentAcc = this.state.acc + currentChar
        this.setState({acc: currentAcc, input: this.mask(currentAcc)})
      }
    }
  }

//function to mask the input as the user types the Numbers should appear
//already formatted as an amount of currency
//example: inputting 123 would behave like this $0.01 ... $0.12 ... $1.23
  mask = (num) => {
    let dollars;
    let cents;
    if(num<10){
      dollars = "0"
      cents = `0${num}`
    } else {
      dollars=Math.floor(num/100)
      cents=num%100
    }
    return `$${dollars}.${cents}`
  }


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <input 
          value={this.state.input || "$0.00"} //value is $0.00 to start, then it is whatever the input is
          onKeyDown={this.getKey}/>
        </header>
      </div>
    );
  }
}

export default App;

Заранее спасибо за любые указатели!

1 Ответ

0 голосов
/ 29 октября 2018

В React Github Repo идет длинный разговор о проблеме, связанной с .И пока нет элегантного решения.

Самое простое решение на данный момент, чтобы удалить это предупреждение, это добавить отдельную пустышку onChange prop (onChange={() => {}}) к элементу ввода, как предложено в этом посте.

...