Saya mencoba untuk mengecualikan minus dan plus dari input, tetapi itu salah:
handleChange(event) {
const value = event.target.value.replace(/\+|-/ig, '');
this.setState({financialGoal: value});
}
Merender kode input:
<input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/>
Saya mencoba meniru kode Anda dan menyadari bahwa ada masalah pada React dengan &<input type='number' />
. Untuk solusi, periksa contoh ini dan coba sendiri: https://codepen.io/zvona/pen/WjpKJX?editors=0010
Anda perlu mendefinisikannya sebagai input normal (type=39;text') dengan pola untuk angka saja:
<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />
Dan kemudian untuk membandingkan validitas input:
const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;
Peringatan terbesar pada pendekatan ini adalah ketika datang ke ponsel --> di mana keyboard tidak dalam format numerik tetapi dalam format alfabet normal.
Untuk berhenti mengetik, gunakan onKeyPress
bukan onChange
.
Menggunakan event.preventDefault()
di dalam onKeyPress
berarti MENGHENTIKAN event penekanan.
Karena keyPress
handler dipicu sebelum onChange
, anda harus memeriksa tombol yang ditekan (event.keyCode
), BUKAN nilai input saat ini (event.target.value
)
onKeyPress(peristiwa) {
const keyCode = event.keyCode || event.which;
const keyValue = String.fromCharCode(keyCode);
if (/\+|-/.test(keyValue))
event.preventDefault();
}
const {Component} = React;
class Input extends Component {
onKeyPress(event) {
const keyCode = event.keyCode || event.which;
const keyValue = String.fromCharCode(keyCode);
if (/\+|-/.test(keyValue))
event.preventDefault();
}
render() {
return (
<input style={{width: '150px'}} type="number" onKeyPress={this.onKeyPress.bind(this)} />
)
}
}
ReactDOM.render(<input /> , document.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section id="app"></section>