Блог

Я пытаюсь создать поле только для числового ввода в компоненте react-bootstrap. Я знаю, что есть атрибут type=»number», который мы могли бы использовать, но для типа задан пароль для маскировки ввода.

Сначала я попробовал это, но это не сработало:

 handleAcessCodeChange(event) {
    isNan(event.target.value) ? this.setState({ [event.target.id] : event.target.value }) : console.log('Non-numeric input');
}
  

Затем я попробовал долгий путь, который все равно не сработал:

 if(isNaN(event.target.value)) {
  this.setState({ [event.target.id] : event.target.value });
}
else {
  event.preventDefault();
  console.log('Error');
}
  

 {/* Access code */}
<Form.Group controlId='accessCode'>
    <Form.Label>Access Code</Form.Label>
    <Form.Control
      style={{ width: '50%' }}
      type='password'
      placeholder='Enter access code'
      defaultValue=''
      autocomplete='off'
      value={this.state.accessCode}
      onChange={this.handleAcessCodeChange.bind(this)}
    />
</Form.Group>
  

Я ожидал, что страница отобразит ошибку, если был введен нечисловой ввод, но он принял все. Есть ли проблема с моим кодом или это реализовано в компоненте начальной загрузки?

Я знаю, что об этом спрашивали некоторое время назад, но этот вопрос появился, когда я искал ответ.

Возможно, вы захотите использовать Number.isNaN, который отличается от глобального isNaN (требуется заполнение IE)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description

проверьте некоторые из этих примеров из MDN:

 isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN('37');      // false: "37" is converted to the number 37 which is not NaN
isNaN('37.37');   // false: "37.37" is converted to the number 37.37 which is not NaN
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC") is 123 but Number("123ABC") is NaN
isNaN('');        // false: the empty string is converted to 0 which is not NaN
isNaN(' ');       // false: a string with spaces is converted to 0 which is not NaN

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

// This is a false positive and the reason why isNaN is not entirely reliable
isNaN('blabla');   // true: "blabla" is converted to a number. 
                   // Parsing this as a number fails and returns NaN