Hanya angka. Masukkan angka di React

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}/>
Erubiel
Pertanyaan edit 27 Maret 2019 в 5:41
Pemrograman
regex javascript reactjs
28 April 2017 в 7:53
1 tampilan
Larutan

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.

zvona
Jawaban edit 28 April 2017 в 8:45
Komentar (3)

satu baris kode

<input value={this.state.financialGoal} onChange={event => this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/>
Komentar (3)

  • 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();
 }

Demo di bawah ini 👇 🏻

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>
Komentar (3)