Когда моя страница загружается и я нажимаю цифровые клавиши, ввод не фиксируется.Но если я нажму на цифровой NumPad (который является ручным способом ввода с помощью onClick), я могу затем использовать функцию onKeyUp для ввода остальных чисел.
Я пробовал onKeyDown, onKeyUp, onKeyPress
никто из них не изменил результат
Numpad
<Form>
<div id="pinpad" className="btn-group btn-matrix mb-3" >
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-1" value="1">1</button>
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-2" value="2">2</button>
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-3" value="3">3</button>
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-4" value="4">4</button>
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-5" value="5">5</button>
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-6" value="6">6</button>
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-7" value="7">7</button>
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-8" value="8">8</button>
<button onKeyUp={props.numPad} onClick={props.handleAnswerInput} className="btn btn-dark styled-btn" id="num-9" value="9">9</button>
</div>
<Button id="submit-btn" onClick={props.handleAnswerSubmit}>Submit</Button>
<Button id="reset-btn" onClick={props.handlePinReset}>Reset</Button>
</Form>
Функция обработчика событий
handleEventNumber = (event) => {
let key = event.keyCode;
switch (key) {
case 49 || 97:
this.setState({
value: 1
})
console.log(`clicked`)
break;
case 50 || 98:
this.setState({
value: 2
})
console.log(`clicked`)
break;
case 51 || 99:
this.setState({
value: 3
})
console.log(`clicked`)
break;
case 52 || 100:
this.setState({
value: 4
})
console.log(`clicked`)
break;
case 53 || 101:
this.setState({
value: 5
})
console.log(`clicked`)
break;
case 54 || 102:
this.setState({
value: 6
})
console.log(`clicked`)
break;
case 55 || 103:
this.setState({
value: 7
})
console.log(`clicked`)
break;
case 56 || 104:
this.setState({
value: 8
})
console.log(`clicked`)
break;
case 57 || 105:
this.setState({
value: 9
})
console.log(`clicked`)
break;
default:
this.setState({
value: undefined
})
console.log(`clicked`)
}
let number = this.state.value;
pinArray.push(number);
placeholderArray.push('*');
let placeholderString = placeholderArray.join('');
this.createPlaceHolder(placeholderString);
}
Компонент, примененный к странице
<SecurityCard
handleAnswerInput={this.handleAnswerInput}
title={card.title}
name="answer"
value={card.value}
handleAnswerSubmit={this.handleAnswerSubmit}
attempts={this.state.attempts}
placeholder={this.state.placeholder}
handlePinReset={this.resetPinArrays}
numPad={this.handleEventNumber}
/>
Ожидаемые результаты. Когда страница загружается без обязательного поведения, я могу нажимать цифровые клавиши на клавиатуре, и она заполнит ввод
Фактические результаты: клавиатуране отвечает, только onClickHandler отвечает.Если я нажму один раз, чтобы начать ввод, я смогу завершить его, набрав цифры, как я и хотел.