Eksi ve artıyı girişten hariç tutmaya çalışıyorum, ancak yanlış gidiyor:
handleChange(event) {
const value = event.target.value.replace(/\+|-/ig, '');
this.setState({financialGoal: value});
}
Giriş kodunu oluşturun:
<input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/>
Kodunuzu taklit etmeye çalıştım ve React'te **<input type='number' />` ile ilgili bir sorun olduğunu fark ettim. Geçici çözüm için bu örneği kontrol edin ve kendiniz deneyin: https://codepen.io/zvona/pen/WjpKJX?editors=0010
Yalnızca sayılar için desen içeren normal girdi (type='text') olarak tanımlamanız gerekir:
<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />
Ve sonra girdinin geçerliliğini karşılaştırmak için:
const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;
Bu yaklaşımdaki en büyük uyarı, klavyenin sayısal değil normal alfabetik formatta olduğu mobil cihazlar söz konusu olduğunda ortaya çıkmaktadır.
Yazmayı durdurmak için onChange
değil onKeyPress
kullanın.
onKeyPressiçinde
event.preventDefault()` kullanmak, basma olayını DURDURMAK anlamına gelir.
keyPressişleyicisi
onChangeden önce tetiklendiğinden, girdinin geçerli değerini DEĞİL (
event.target.value), basılan tuşu (
event.keyCode`) kontrol etmeniz gerekir
onKeyPress(event) {
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>